The Ultimate Tutorial to React-Router Link Component

Exploring to, ref, and component props, NavLink and more

Jon Middaugh
Feb 4 · 4 min read
Photo by JJ Ying on Unsplash

React-Router is a highly popular routing library. As of the beginning of 2021, it has more than 4 million weekly downloads:

One of the core pieces of react-router is the Link component. This versatile component has props for customizing routing, passing routing params as objects, styling, history, and more.

Let’s build an app that demonstrates these properties. Since this is a demo of the Link component, the app will be heavy on the Links.

Codesandbox for the app is in the resources section at the end of the article.

The most basic react-router Link component may look something like this: <Link to="/page1">Page 1</Link> .

However, the to prop can accept more than a string. It can accept an object and an arrow function.

The above react-router Link to prop sets the pathname, which is what to=“/page1” sets without explicitly stating it. However, the object above also sets a query param (accessible via URLSearchParams(useLocation().search)) and state (accessible via props.location.state?.count). In the Codesandbox demo, the above code can be found on the second Link component in App.js.

Another to prop option is to pass a lambda function:

This is similar to to=“/page4”, but it is useful for setting a variable value as part of the returned string, (for example, () => `/page4?color=${selectedColor}`). The above code can be found in App.js as well.

You may have noticed component={H1} and text=“Page 4" in the above Link code. This is a way for the Link component to be customized in whatever way desired. In App.js of our Codesandbox:

This code creates a custom h1 component that can be used with a react-router Link component. Notice that the text prop from the Link code snippet above was passed into the H1 component as props.text. I also had to use the useHistory hook to be able to interact appropriately with react-router.

A common reason to pass a component prop to Link is to have a custom styled link. Another common reason might be to pass a component that interacts with a ref somehow.

The refs prop can be used to update the Link component dynamically without causing a rerender:

Updating the text on hover

When the Hover container is hovered over, the text for the Page 2 link updates. This is accomplished by using the useRef react hook and updating the ref in the onMouseOver/onMouseOut functions of the container.

Refs with Links are commonly used for styling, but many kinds of DOM manipulation can be accomplished.

NavLinks are similar to Link components but they have a few more props for adding styling when the NavLink to matches the current URL.

In the code above, when the URL is at “/page3”, the link text color will be orange.

Pretty straight forward, right?

Another similar prop is activeClassName, which applies a class instead of an inline style when the URL matches.

Some of the remaining NavLink props, exact, strict, and isActive, restrict the rules for determining a URL match.

A tutorial on URL params and query params:

React-Router documentation:

https://reactrouter.com/web/api/Link/activestyle-object

The Clever Dev

Writing better JavaScript (See all demos here: https://smartdevpreneur.com/)

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

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