Skip to main content

React Router - Linking

React Router - Linking​

Lets explore how routing works in React, specifically using Link and NavLink components from React Router, focusing on their use cases and how you can optimize your routing with parameters like isActive, replace, reloadDocument, and end.


The Link component is the core element for navigation in React Router. It allows you to navigate to different routes without causing a page reload.


import { Link } from "react-router-dom";

<Link to="/about">Go to About</Link>;

In this example, clicking on the "Go to About" link will navigate to the /about route defined in your routing setup. The to attribute in the Link component specifies the path you want to navigate to.

While Link is used for basic navigation, NavLink is a more advanced version.

It is used when you want to apply active styling to the navigation link, allowing users to visually identify the current page. It automatically applies an active class when the link corresponds to the current route.


import { NavLink } from "react-router-dom";

<NavLink to="/about" activeClassName="active">
  About
</NavLink>;

In this example, the NavLink will add the active class to the link when the current route is /about. You can customize the active class using the activeClassName or activeStyle props.


isActive​

It also has callback props on className, style, and children with the active state for inline styling or conditional rendering:

// className
<NavLink to="/messages" className={({ isActive }) => (isActive ? "text-red-500" : "text-black")}>
  Messages
</NavLink>
// style
<NavLink
  to="/messages"
  style={({ isActive }) => ({
    color: isActive ? "red" : "black",
  })}
>
  Messages
</NavLink>
// children
<NavLink to="/message">
  {({ isActive }) => <span className={isActive ? "active" : ""}>{isActive ? "👉" : ""} Tasks</span>}
</NavLink>

Parameters in Link & NavLink​

React Router provides several parameters that can modify how navigation occurs with both Link and NavLink. Here are a few important ones:

1. replace​

The replace parameter allows you to replace the current entry in the browser's history stack instead of adding a new one. This is useful when you don't want the user to be able to hit the back button and return to the previous route.

Example:​

<NavLink to="/home" replace>Home</NavLink>
<Link to="/home" replace>Home</Link>

In this case, clicking on the "Home" link will replace the current route in the history stack for both NavLink and Link.

2. reloadDocument​

The reloadDocument parameter, when set to true, forces the browser to reload the document, similar to traditional navigation. This is typically used for external links or when you need to reload the entire page after navigation.

Example:​

<NavLink to="https://external.com" reloadDocument>External Link</NavLink>
<Link to="https://external.com" reloadDocument>External Link</Link>

This will open the external link and reload the page.

3. end​

The end parameter is used to match the URL exactly. Without this, NavLink and Link will match any route that starts with the path specified in to. By setting end to true, you ensure that the link only gets the active class or navigation behavior if it matches the entire URL.

Example:​

<NavLink to="/about" end activeClassName="active">About</NavLink>
<Link to="/about" end>About</Link>

In this case, the link will only be active when the path is exactly /about, not for any sub-routes like /about/team or /about/contact.