Using React Router for Client Side Routing: The Easy Way

Learn how to route to different sections of your react application with ease.

Photo by Growtika on Unsplash

React is a very popular UI library that’s used by many front-end developers to create interactive user interfaces for single-page applications (SPAs).

Although React.js provides many interesting features out of the box, client-side routing is not one of them.

Routing is what helps us create an illusion of navigating from one page to another when interacting with a React.js application.

I call it an illusion because React.js is a component-based library. Ideally, all we do is create UI Components to represent various pages which are then mounted/rendered to the DOM based on the content you want to display to the users.

How then can one implement Page Routing in React?

The good news is that the react ecosystem provides a handful of tools that help us achieve just that. Some of those include;

• React Router
• Wouter
• etc

React Router is the most popular client-side routing tool on the NPM registry, accounting for over 9 million weekly downloads (at the time I wrote this blog). It’s a great tool that offers declarative routing options for React.js applications.

Check out the React Router Docs (below) for more details:

Home v6.18.0

Getting Started with React Router

Let’s create and implement a simple React Project with React Router.

Step 1: Setup a React.js project using Vite

Open your terminal or a command prompt window and run the following command.

$ npm create vite@latest router-app -- --template react

You should get output similar to what you see below;

Open up your project in Visual Studio Code (code editor) using these commands in the terminal;

$ cd router-app
$ code .

The commands run in the terminal window

Your project opened in Visual Studio Code.

You then have to install app dependencies by opening the in-built terminal in VS Code and running the command;

npm install

Navigate to the terminal in vs code and select “New Terminal”

After installing the dependencies, run the react project using the command;

npm run dev

Access the URL http://localhost:5173 in your browser to see the output of your react app; See the example below.

Output of the React App

Step 2: Create the pages (Home, Quotes, FAQs)

In the src folder, create a folder called pages and in it, create 3 react components that will represent the Home, Quotes, and FAQs page.

Home Page: In the Home Component file (Home.jsx) add the following code;

function Home(){
    return(
        <div className="page">
            <h1>Home Page</h1>
            <p>
                <strong>Home Page:</strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum, 
                provident non. Voluptas fugiat molestias obcaecati odio repudiandae autem ad, enim qui? 
                Delectus ab maiores voluptas consectetur totam quo aperiam nesciunt.
            </p>
        </div>
    )
}

export default Home;

Quotes Page: In the Quotes Component file, add the following code.

function Quotes(){
    return(
        <div className="page">
            <h1>Quotes Page</h1>
            <p>
                <strong>Quotes Page:</strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum, 
                provident non. Voluptas fugiat molestias obcaecati odio repudiandae autem ad, enim qui? 
                Delectus ab maiores voluptas consectetur totam quo aperiam nesciunt.
            </p>
        </div>
    )
}

export default Quotes;

FAQs Page: Finally add the following code in the FAQs component file

function Faqs(){
    return(
        <div className="page">
            <h1>Frequently Asked Questions</h1>
            <p>
                <strong>FAQs:</strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum, 
                provident non. Voluptas fugiat molestias obcaecati odio repudiandae autem ad, enim qui? 
                Delectus ab maiores voluptas consectetur totam quo aperiam nesciunt.
            </p>
        </div>
    )
}

export default Faqs;

Step 3; Import the 3 pages into the App.jsx Component

As we prepare to use React Router, we need to clear the current code in the App.jsx component and replace it with the code below.

import Home from "./pages/Home";
import Quotes from "./pages/Quotes";
import Faqs from "./pages/Faqs";
import "./App.css";

function App(){
  return(
    <div>
      {/* Navigation Menu */}
      <header>
        <nav>
          <ul>
            <li>
              <a href="/">Home</a>
            </li>
            <li>
              <a href="/quotes">Quotes</a>
            </li>
            <li>
              <a href="/faqs">FAQs</a>
            </li>
          </ul>
        </nav>
      </header>



    </div>
  )
}

export default App;

When we access the react project in the browser via http://localhost:5173, this is how it should look like.

This doesn’t look cool… Let’s beautify it a bit using some CSS in the App.css file. Add the following code to the App.css file and clear all the code in the index.css file.

@import url('https://fonts.googleapis.com/css2?family=Merriweather+Sans:wght@300;400&display=swap');

header{
  width: 80%;
  margin: auto;
  border: 2px solid white;
  border-radius: 5px;
  background-color: #E57C23;
}

ul{
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 2rem;
  font-size: 2rem;
  font-family: 'Merriweather Sans', sans-serif;
}

li a{
  text-decoration: none; 
  color: #F8F1F1;
}

li a:hover{
  text-decoration: underline;
  color: #025464;
}


.page{
  width: 80%;
  margin: auto;
  font-family: 'Merriweather Sans', sans-serif;
}

.page p{
  font-weight: 300;
  width: 60%;
}

The output on http://localhost:5173 should now look like this;

Step 4: Install React Router

It’s now time to use React Router in your project for us to implement client-side routing between the Home, Quotes, and FAQs pages.

To Install React Router, run the following command in the VS Code terminal;

npm install react-router-dom

After it’s been successfully installed, you import it into the App.jsx component.

Using Browser Router

In this tutorial, I’ll show you how to make use of the Browser Router Component from React Router to implement client-side routing in our React project.

It’s important to note that react-router has various strategies for implementing client-side routing based on the use case scenario. Check out the Docs for more details.

Inside the App.jsx component, you are going to import BrowserRouter, Routes, and Route from react-router-dom as shown below;

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

• Browser Router
  It provides routing context that helps determine the current location URL, route query, and path params which are used to determine what should be displayed.

<BrowserRouter>

  {/* Routes go in here */}

</BrowserRouter>

• Routes
  This is a component that encapsulates all the routes and determines which route to use based on the current path that a user is accessing.

<Routes>
  <Route path="/" element={<Home/>}/>
  <Route path="/quotes" element={<Quotes/>}/>
  <Route path="/faqs" element={<Faqs/>}/>
</Routes>

• Route
  A route component is used to declare a path e.g. /home or /about and maps that path to a react component that should be displayed when that path is accessed.

<Route path="/faqs" element={<Faqs/>}/>

Step 4: Using BrowserRouter in our App.jsx component

Add the Browser Router and create Routes for the Home, Quotes, and FAQs components in the App.jsx component. Implement it as shown in the code below

import Home from "./pages/Home";
import Quotes from "./pages/Quotes";
import Faqs from "./pages/Faqs";
import {BrowserRouter, Routes, Route} from "react-router-dom"
import "./App.css";

function App(){
  return(
    <div>
      {/* Navigation Menu */}
      <header>
        <nav>
          <ul>
            <li>
              <a href="/">Home</a>
            </li>
            <li>
              <a href="/quotes">Quotes</a>
            </li>
            <li>
              <a href="/faqs">FAQs</a>
            </li>
          </ul>
        </nav>
      </header>

      <BrowserRouter>

        <Routes>
          <Route path="/" element={<Home/>}/>
          <Route path="/quotes" element={<Quotes/>}/>
          <Route path="/faqs" element={<Faqs/>}/>
        </Routes>

      </BrowserRouter>


    </div>
  )
}

export default App;

We should be able to navigate through the pages via the navigation menu. See the clip below;

The links seem to be working but there is a problem here. Notice how the page refreshes every time we click on any of the links??? that’s not a correct behavior especially when implementing client-side routing in React.js.

Step 5: Using the Link Component.

Since React.js is used to build “Single Page” Applications, refreshing the app to load a new page goes against that, so we need to get rid of that by using the Link component that React Router provides.

Import the Link from the react-router-dom within the App.jsx component;

import {BrowserRouter, Routes, Route, Link} from "react-router-dom"

refactor the navigation menu links like so;

{/* Navigation Menu */}
      <header>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/quotes">Quotes</Link>
            </li>
            <li>
              <Link to="/faqs">FAQs</Link>
            </li>
          </ul>
        </nav>
      </header>

You’ll also have to wrap all content (JSX) returned by the App.jsx component with the BrowserRouter component like so;

import Home from "./pages/Home";
import Quotes from "./pages/Quotes";
import Faqs from "./pages/Faqs";
import {BrowserRouter, Routes, Route, Link} from "react-router-dom"
import "./App.css";

function App(){
  return(
    <BrowserRouter>
      <div>
        {/* Navigation Menu */}
        <header>
          <nav>
            <ul>
              <li>
                <Link to="/">Home</Link>
              </li>
              <li>
                <Link to="/quotes">Quotes</Link>
              </li>
              <li>
                <Link to="/faqs">FAQs</Link>
              </li>
            </ul>
          </nav>
        </header>


          <Routes>
            <Route path="/" element={<Home/>}/>
            <Route path="/quotes" element={<Quotes/>}/>
            <Route path="/faqs" element={<Faqs/>}/>
          </Routes>
      </div>
    </BrowserRouter>
  )
}

export default App;

Awesome… we are done with the project. Your output should now be fine without any page reload when you navigate to different pages.

It’s as simple as that. I hope you’ve learned how to use React Router.

Here is the link to the GitHub repo for this project:

GitHub - Roland-Sankara/react-routerv6-demo: In this project, I demonstrate the use of react router…

In Part 2 of this blog, I will show you how to work with Dynamic Routes using React Router. Look out for Part 2 coming out soon.

Let me know if this helped and if you have any questions regarding react-router, add them in the comments section.