<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:



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Sam Hall

Sam Hall

Full stack developer and stand-up comic.