How to Set Up Client-Side Routing Using React

Introduction

Giving users the ability to navigate throughout your application in a logical and organized manner is crucial. React provides developers with the <Route></Route> tool to allow ease of access to the components of your choosing. In this post, I will walk you through the steps to take in order to set up client-side routing using React in the form of clickable links, assuming you have started a React application using create-react-app.

Step 1:

Before you are able to use <Route> you must first import from react as such:

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

This should be done in your index.js file.

If you wish to rename the BrowserRouter to something else, you can do so by importing in the following manner:

import {BrowserRouter as MyRouter} from "react-router-dom";

For the sake of this guide, I will be using <BrowserRouter>.

Step 2:

In your terminal, run the command $ npm install react-router-dom

Step 3:

In your index.js file, wrap the application being rendered with <BrowserRouter>

eg:

...
ReactDOM.render(
   <BrowserRouter>
     <App />
   </BrowserRouter>
 document.getElementById('root')
);
...

Step 4:

Decide where you want to draw the routes. Usually, it makes sense to direct the routes to where the components are being rendered. I'll say that parent component is called <App />.

Step 5:

Import <Route> and <Switch> into the <App /> component using

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

Step 6:

Create an empty navigation component, such as Nav.js

eg:

import React from "react";

  function Nav(){
     return(<div></div>);
  }

export default Nav;

Step 7:

Render the navigation component within the <App /> component.

Step 8:

Wrap all the components within <App /> you wish to create routes to with <Switch></Switch>, and wrap each individual component within the <Switch> with <Route></Route>

eg:

...
function App(){
   return(){
     <Nav />
       <Switch>
         <Route>
           <ComponentOne />
         </Route>
         <Route>
           <ComponentTwo />
         </Route>
       </Switch>
   };
}
...

Note: the <Nav /> component was left outside of the <Switch>, this is because we want the navigation functionality to remain on all pages of our application.

Step 9:

Set the paths you want for each component within the <Switch> using path or exact path

eg:

...
       <Route exact path="/One">
        <ComponentOne />
       </Route>
       <Route exact path="/Two">
        <ComponentTwo />
       </Route>
...

Step 10:

Import <NavLink> into your <Nav /> component. Then, add <NavLink> to create clickable links with paths defined by the <Route>s in step 9.

eg:

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

function Nav(){
   return(
     <div>
       <h2>Navigation Bar</h2>
        <NavLink to="/One">ComponentOne</NavLink>
        <NavLink to="/Two">ComponentTwo</NavLink>
     </div>
   )
}
...

Conclusion:

You should now have fully functioning client-side routing in the form of clickable links under a navigation bar! Being able to implement routes is a crucial skill to have considering how necessary it is for users to be able to navigate around applications with ease. I hope this guide is helpful to you if you are learning how to build client-side routing in React.