<Link> Component in React

Sam Hall
Oct 5, 2021

What is <Link>? How does <Link> work? How do I use <Link>? Why so many questions?

No 😔Unfortunately not that Link.

React provides a declarative component for redirecting within a Single Page Application. The <Link> Component works by using a string as an accessible navigator to different parts of your webpage, by concatenating the pathway you have assigned it. It looks a little something like this:

The code!
How it renders on the page!
What the “Book Me!” Hyperlink redirects to — notice the “/contact” pathway in the URL.

Don’t forget to first import <Link> at the top of every Component.js file like so:

Then the to=string portion of the <Link> must be the pathway as defined within your React Router Components in the App.js file, like so:

In the specific Component file
In the App.js file

And there you have it!

Further Reading: