How to have an image as a nav link in react

While building a react app, I had a bunch of different pages and I wanted a clean way to present it instead of just a bunch of text on a screen. This is how I went about achieving that result.

First of all I needed to make sure my program had the ability to use nav links. This is achieved by first installing “react-router-dom” through your terminal and importing “nav link” to which ever pages you want to be able to navigate from. It should look something like this after you’ve installed…

From there you need to include an image to refer to. I created a logo and saved it as a png file on my local machine. From there I recommend creating a folder within your src folder to store files (I usually name mine assets)

Next you need to import that file into the page you want to reference that image in.

Lastly, all we need to do is set up our nav link inside of our JSX and reference that import address and it becomes it’s own element. You start with an opening nav link tab, assigning it it’s own class and then from there dropping an img tag within that nav link and setting that src to the file you imported (logo in this case)

You then close the nav link tag after setting your img tag and you have an image that functions as a nav link between pages you create!