How to handle navigation in your app with React Router Link

In this article, we'll explore the navigation possibilities in a React app and we'll take a look at the React Router Link component. We'll discuss: the approach and prerequisites when handling navigation with React Router, why 

tag, and how to implement React Router Link and its variations, 

React is an awesome library for single page applications that require fast loading speeds and real-time updates based on user interactions. However, most web applications are multi-page.

In non-React apps, the navigation between pages is done through 

 tags. The same can be used in React, but the problem with the these tags is that they create server-side links. This means that whenever you click on the tag to access another page, a new request is sent to the server, and the current page is redirected in the browser to the new page.

React Router switches from server-side to client-side routing, so when you click on the 

  component, the app checks the route and loads the requested component without reloading the full page in the browser. 

This ensures faster page speeds and a better use of resources, and contributes to a nicer user experience, since the page doesn’t fully reload with every click.

Now let’s see the React Router Link in action! 

This short guide will give you a basic understanding of how to handle navigation in a React application. By the end of the tutorial, you should understand how 

 work, so that you can create a functional multi-page application. 

To make this easier to follow, we’ll create a small application that has three pages:

 components, while the last one will make use of the 

This article explains the React Router Link component, which is used in web applications for changing the client view and loading different pages based on route parameters. 

To get the most out of this guide, you should be familiar with: 

React Router is used for handling navigation state and keeping the UI in sync with the URL. It watches for changes in the browser URL and displays the UI components that match the route configuration. 

Thus, in order to navigate between pages in a web application using the React Router, we need to: 

Please notice how I’ve mentioned two different concepts: the router and the route. Both are React components, but they’re not rendered on the page, so they don’t add elements to the DOM by themselves. 

Instead, what these two components do is to handle the logic and define the rules for the application’s functioning. The 

 component “oversees” or coordinates all the components defined in the routes, while the 

 define the components that should be rendered for each route or path. 

To understand this concept better, let’s look at how a single component is rendered in React, first without React Router in place.

import React from "react";

const App = () => {
  return (
    <section className="App">
      <h1>This is the homepage</h1>
    </section>
  );
};

export default App;

---
  
ReactDOM.render(<App />, document.getElementById("root"));

 component to render the app, we first need to define the route or path where the 

 component will be rendered. This is usually the homepage of the app, so the route will be “/”, and the name of the page “Home”. 

In this case, our code needs to be adjusted as follows: 

const App = () => {
  return (
    <section className="App">
      <Router>
        <Link to="/">Home</Link>
        <Route path="/" component={Home} />
      </Router>
    </section>
  );
};

export default App;

---

ReactDOM.render(<App />, document.getElementById("root"));

Similarly, we can define the components that we want to render on the other pages of the app:

return (
  <section className="App">
    <Router>
      <Link to="/">Home</Link>
      <Link to="/about-us">About us</Link>
      <Route path="/" component={Home} />
      <Route path="/about-us" component={About} />
    </Router>
  </section>
);

The “About us” page will only be rendered when the path matches the URL, and if the user wants to navigate to the homepage again, this will happen without a request to the server. 

We’ll explore this example further in the next sections, but first we should get an overview of all the components available in React Router for navigation purposes.

The Link component that we saw above is used for internal links, but the navigation of a web app usually makes use of a different component: 

If a page is outdated and you want to direct users to a newer version or to a completely different page, you can make use of the 

So we have three basic options for handling path changes in React apps, if we go the React Router way: 

How the route changes in React applications

For changing the route and displaying another component when the URL changes, we can use the 

 component mentioned above. However, there’s one problem with this component: Route renders 

This makes it useful when you want to display the main menu on all pages for example, but it becomes problematic if you have pages where you don’t want the menu to be displayed fully. 

For example, if you have a landing page where you want the user to fill in a form, or a checkout flow where you want to remove distractions, you don’t want to display the full navigation. 

. The former component is similar to the latter, in the sense that it renders links, but it only displays the first link element whose path matches the current URL. 

Thus, as a general rule, if you have multiple routes but want to render only one at a time, you should use 

<Switch>
  <Route exact path="/">
    <Home />
  </Route>
  <Route path="/about">
    <About />
  </Route>
  <Route path="/dashboard">
    <Dashboard />
  </Route>
</Switch>;

We've covered the essential theory, now let’s see all this in action in a practical application!

React Router Link & NavLink - practical application

As mentioned in the beginning, for this example we’ll build a simple React application with three pages. I’ll use codesandbox.io and you can find the final code 

Before we start, we need to install two dependencies: 

If you’re using create-react-app, please go ahead and initiate a new application, then install the dependencies above. 

I'll first create the files needed for the project: 

Let's populate the Home, About and Contact pages with very simple React components that display a simple heading.

Add the following code to the Home.js file: 

// Home.js

import React from "react";

const Home = () => {
  return (
    <section className="Home">
      <h1>This is the homepage</h1>
    </section>
  );
};

export default Home;

Then, add this code to the About.js file: 

// About.js

import React from "react";

const About = () => {
  return (
    <section className="About">
      <h1>This is the About page</h1>
    </section>
  );
};

export default About;

Finally, add this code to the Contact.js file:

// Contact.js

import React from "react";

const Contact = () => {
  return (
    <section className="Contact">
      <h1>This is the Contact page</h1>
    </section>
  );
};

export default Contact;

All these are simple React functional components, so nothing complicated until now. Let's render all of them in the App.js file:

// App.js

import React from "react";
import {
  BrowserRouter as Router,
  Route, 
  Link, 
} from "react-router-dom";
import Home from "./Home";
import About from "./About";
import Contact from "./Contact";

const App = () => {
  return (
    <section className="App">
      <Router>
        <Link to="/">Home</Link>
        <Link to="/about-us">About us</Link>
        <Link to="/contact">Contact</Link>
        <Route path="/" component={Home} />
        <Route path="/about-us" component={About} />
        <Route path="/contact" component={Contact} />
      </Router>
    </section>
  );
};

export default App;

 and rendering them all inside the app. If we run this code now, the links look a bit crowded, so let's style them quickly: 

// styles.js

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

export const StyledLink = styled(Link)`
  color: red;
  text-decoration: none;
  margin-right: 5px;

  &:hover {
    text-decoration: underline;
  }
`;

 component now in the app, instead of the 

import React from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";
import Home from "./Home";
import About from "./About";
import Contact from "./Contact";
import { StyledLink } from "./styles";

const App = () => {
  return (
    <section className="App">
      <Router>
        <StyledLink to="/">Home</StyledLink>
        <StyledLink to="/about-us">About us</StyledLink>
        <StyledLink to="/contact">Contact</StyledLink>
        <Route path="/" component={Home} />
        <Route path="/about-us" component={About} />
        <Route path="/contact" component={Contact} />
      </Router>
    </section>
  );
};

export default App;

Now let's run the code. You should see this app in your browser: 

, yet we're seeing the Homepage heading too. This happens because 

 can only display one child, so we can try to solve the issue by adding 

// App.js

const App = () => {
  return (
    <section className="App">
      <Router>
        <StyledLink to="/">Home</StyledLink>
        <StyledLink to="/about-us">About us</StyledLink>
        <StyledLink to="/contact">Contact</StyledLink>
        <Route exact path="/" component={Home} />
        <Route exact path="/about-us" component={About} />
        <Route exact path="/contact" component={Contact} />
      </Router>
    </section>
  );
};

Now we see, indeed, only the components that match the exact path for each URL:

This solution works for simple menus, but the code gets crowded when we have multiple nested routes. So let's try to use 

 instead, since we know that it's better practice. Our code will now look like this: 

// App.js

import React from "react";
import {
  BrowserRouter as Router,
  Route,
  Switch,
} from "react-router-dom";
import Home from "./Home";
import About from "./About";
import Contact from "./Contact";
import { StyledLink } from "./styles";

const App = () => {
  return (
    <section className="App">
      <Router>
        <nav>
          <StyledLink to="/">Home</StyledLink>
          <StyledLink to="/about-us">About us</StyledLink>
          <StyledLink to="/contact">Contact</StyledLink>
        </nav>
        <Switch>
          <Route exact path="/">
            <Home />
          </Route>
          <Route path="/about-us">
            <About />
          </Route>
          <Route path="/contact">
            <Contact />
          </Route>
        </Switch>
      </Router>
    </section>
  );
};

export default App;

 tag to see a bit better that we're now basically only using two main components inside the router: the 

 components that we've created for the main menu, it's better practice to use 

. This component adds styling by default to the rendered element, so in 

// styles.js

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

export const StyledLink = styled(NavLink)`
  margin-right: 5px;
`;

We're almost done, except that now we're using only 

 components. Let's add two links in the About page: one using React Link, and the other one using a simple 

// About.js

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

const About = () => {
  return (
    <section className="About">
      <h1>This is the About page</h1>
      <Link to="https://google.com">Google 1</Link>
      <a href="https://google.com">Google 2</a>
    </section>
  );
};

export default About;

If you run this code, you'll see that the first link doesn't do anything except for adding "https://google.com" to the path. The second link takes you to the actual search engine page. 

 component is used only for handling internal links. So in this example, let's replace Google 1 with the Contact page and run the code again. When you click Contact now, the URL changes and you see the 

In a bigger website it's common to have pages that are outdated and you want to retire. While you can delete them from your database, that's not good practice, because the URL still remains in your sitemap, and users can still access it if they did previously. So when they access the deleted page, via the URL, they'll see a 404 error. 

To prevent this, whenever you want to retire a page, you can use a 

. Let's redirect the contact page from our example:

// App.js

    <section className="App">
      <Router>
        <nav>
          <StyledLink to="/">Home</StyledLink>
          <StyledLink to="/about-us">About us</StyledLink>
          <StyledLink to="/contact">Contact</StyledLink>
        </nav>
        <Switch>
          <Route exact path="/">
            <Home />
          </Route>
          <Route path="/about-us">
            <About />
          </Route>
          <Route
            path="/contact"
            render={() => <Redirect to="/" />}
          />
        </Switch>
      </Router>
    </section>

When you want to render something special for a certain URL, for example you want to reuse a Campaign page template whenever you run a new campaign, you can use a custom link component. 

To do so, you first have to define it, so let's create a CampaignLink component:

function CampaignLink({ label, to, activeOnlyWhenExact }) {
  let match = useRouteMatch({
    path: to,
    exact: activeOnlyWhenExact,
  });

  return (
    <div className={match ? "active" : ""}>
      {match && "*** "}
      <Link to={to}>{label}</Link>
    </div>
  );
}

 hook, we need to import it in our App.js file, along with 

// App.js

import React from "react";
import {
  BrowserRouter as Router,
  Route,
  Switch,
  Redirect,
  Link,
  useRouteMatch,
} from "react-router-dom";
import Home from "./Home";
import About from "./About";
import Campaign from "./Campaign";
import { StyledLink } from "./styles";

function CampaignLink({ label, to, activeOnlyWhenExact }) {
  let match = useRouteMatch({
    path: to,
    exact: activeOnlyWhenExact,
  });

  return (
    <div className={match ? "active" : ""}>
      {match && "*** "}
      <Link to={to}>{label}</Link>
    </div>
  );
}

const App = () => {
  return (
    <section className="App">
      <Router>
        <nav>
          <StyledLink to="/">Home</StyledLink>
          <StyledLink to="/about-us">About us</StyledLink>
          <StyledLink to="/contact">Contact</StyledLink>
          <CampaignLink
            activeOnlyWhenExact={true}
            to="/campaign"
            label="Campaign"
          />
        </nav>
        <Switch>
          <Route exact path="/">
            <Home />
          </Route>
          <Route path="/about-us">
            <About />
          </Route>
          <Route
            path="/contact"
            render={() => <Redirect to="/" />}
          />
          <Route path="/campaign">
            <Campaign />
          </Route>
        </Switch>
      </Router>
    </section>
  );
};

export default App;

What we're doing here is that whenever we have a campaign page, we display "*** " in front of the navigation link when the page is active. Thus, if the URL matches "/campaign", the link of the campaign page in the main menu receives three stars in front.

Until now, we've made all the page headings static, but we can turn them into dynamic titles with the help of props. Let's do this for the Campaign page. First, we'll adjust the component rendered by 

import React from "react";

const Campaign = ({ title }) => {
  return (
    <section className="Campaign">
      <h1>{title}</h1>
    </section>
  );
};

export default Campaign;

Now let's pass the title as prop in the App.js file:

<Route path="/campaign">
  <Campaign title={`This is the title of the Campaign page`} />
</Route>;

Using query parameters with React Router Link 

Let's assume that in this page we have hundreds of items, and we want to allow users to search only for a category, let's say Sunglasses. When the URL changes by receiving the query parameter 

, we should render the Sunglasses component. 

AUTHOR

Andreea Macoveiciuc

In this article, we'll explore the navigation possibilities in a React app and we'll take a look at the React Router Link component. We'll discuss: the approach and prerequisites when handling navigation with React Router, why Link is preferred over a simple a tag, and how to implement React Router Link and its variations, NavLink and Redirect.

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

How to handle navigation in your app with React Router Link

Responses (0)

Masterclasses

Tutorials

Fullstack React with TypeScript