Handling multiple pages with the external component React Router DOM

Video tutorial for this article

React Router DOM is an external component that allows you to build bigger projects by separating your project into different pages.

Pre-requisites

What is a Single Page Application (SPA): An excellent short video explaining what a single page application is and why they are so important.

Quick disclaimer

After watching the SPA video above, we can expand about this world of SPA's using React and React Router DOM (I will refer to it as Router from now on to keep it short).

The Router simulates multiple pages with a little trick of changing the browser URL using JavaScript. It is like typing google.com and then google.com/search but without pressing the enter key to change the page. This allows the Router to tell React it has to render different content based on the URL.

The router can utilize this trick to pass information as well. For example, adding an "?" at the end of the URL like google.com/search/?cats or google.com/search/?dogs will allow the Router to use that keyword as a variable and send it across pages.

Intended result

We will have by the end of the article: React Router DOM interactive example.

Figure 1: Collage of the pages we intend to replicate.

Figure 2: The app hierarchy diagram.

Figure 3: React Router DOM most-used components.

Legend:

🟦 Blue: Component created by us.
🟥 Red: Browser Router external component.
🟩 Green: Switch external component.
🟪 Purple: Route external component.
🟨 Yellow: Link external component.

Getting started

Just by looking at the diagram, you can see how big this article will be. Now it should start making sense why it is best to teach certain React concepts in a different order.

To tackle this project we will focus on 3 areas:

How to install the Router
How to set up the App component
How to set up the Header component

How to install the Router:

First, we need to install the external component using NPM:

npm install --save react-router-dom

App component:

Then we proceed to import and utilize the Router components, similar to what we did in the previous article.

import { BrowserRouter, Switch, Route } from "react-router-dom";

import HeaderBar from "./components/HeaderBar";
import PageA from "./components/PageA";
import PageB from "./components/PageB";
import PageC from "./components/PageC";

export default function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <HeaderBar />
        <Switch>
          <Route component={PageA} path="/" exact />
          <Route component={PageB} path="/page-b" />
          <Route component={PageC} path="/page-c" />
        </Switch>
      </BrowserRouter>
    </div>
  );
}

Let's break the new code into detail:

We import not 1 but 3 components from react-router-dom: BrowserRouter, Switch, and Route.
<BrowserRouter> wraps around everything. This is because anything inside it will have access to the web browser URL as a state variable.
<Switch> is the area where you want your navigable components to appear.
<Route> is the component that holds our individual pages. It has 2 important properties:
1. component: Receives the component you want to use as a page.
2. path: The browser's route that will allow users to navigate directly to this page.

Note 1: Watch out the moment you do the import. React has a library called react-dom (without the word router). React uses this library to navigate between components inside other components. Choosing the wrong import library will lead to errors with messages that make no sense.

Note 2: The header bar is outside of the Switch because we do not want it to change when we navigate between pages. However, it is inside the BrowserRouter because it has links that need to interact with the web browser URL.

Note 3: The first route is / to represent the home page, and this route needs the word exact to inform the Router to not confuse it with other routes starting with / but with more words after it.

Header Bar component:

Figure 4: The header bar component.

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

export default function HeaderBar() {
  return (
    <header className="header">
      <Link to="/">Page A</Link>
      <Link to="/page-b">Page B</Link>
      <Link to="/page-c">Page C</Link>
    </header>
  );
}

Lets analyze the code:

We import Link from react-router-dom, just like we did on App.jsx with the other Router components.
<Link> behaves like an anchor or button tag. It has the property called to, where you need to write the same route you put in the <Route path="" /> property.

Conclusion

This covers the basics of Router navigation. In class, we will cover more complex cases like using the URL to pass variables between pages.

For now, we can move to the next article: Manage server state with useEffect hook to learn how to fetch data in React.

Additional reading:

React Router Tutorial: A 30 min video that explains everything you need to know about this external component. It may be long, but it explains the advanced cases like sending variables through the URL.