<Link> Component in React

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:

React Router: Declarative Routing for React