How to implement React Router v6

React Router v6

In this article, we’ll cover the basics of React Router v6. We’ll explain what it is and how we install it.

widget

We use React Router for a multi-page functionality to develop websites with React.

React is easy to implement. It offers a wide range of node packages that help in development. It offers speed and quality. 

The only drawback with React is that it lacks multi-page functionality. To overcome this, we use an npm package React-router.  

Installation

Open the project terminal and install the npm package in the client folder.  

   npm i react-router-dom@6

 Note: In the code widget above, @6 means that we’ll download the latest version at the moment that is version 6. 

Now that we’ve installed the dependency, we’ll create some routes and links to jump between the pages. We’ll follow the steps below to do this:

First, we’ll create the application components. The structure of this app is as follows:

%0 node_1 Index.js node_1658152294934 App.js node_1->node_1658152294934 node_1658152301923 Home.js node_1658152294934->node_1658152301923 node_1658152321537 Cart.js node_1658152294934->node_1658152321537 node_1658152318677 Shop.js node_1658152294934->node_1658152318677
The structure of our site

We'll proceed to create the components needed for this example.

In the index.js file

Here we'll make React Router accessible to all the components in our app.

  1. Import BrowserRouter to the index.js file:
import {BrowserRouter} from 'react-router-dom';
  1. Wrap our <App /> component with <BrowserRouter>:
 <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>

In the App.js file

  1. We’ll import Routes and the Route from the React Router dom to create our pages. The <Routes> will wrap the <Route>  nested within that will be the pages. 
import {Routes, Route} from 'react-router-dom'
  1. Create the routes for every page that we want to create. In this case there will be mainly 3 routes allowing us to move around the website, the home, shop and cart routes.
<Routes>
  <Route path='/home' element={<Home />} />
  <Route path='shop' element={Shop />} />
  <Route path='/cart' element={<Cart />} />
</Routes>;

Nav component

The nav component will be in charge of containing the links that will take us to the different pages within our application. To do this, we will:

  1. Import <Link> from react router dom.
  2. Add the links with their respective routes to the nav bar. They act like the anchor tag in plain JavaScript. And instead of using the href attribute, we replace it with the to=''.
  <Link to='/'>Home</Link>

The '/' means that we are targeting the home page, the index. So if we want to go to another page that is not the home page, instead of using just '/' we need to add to it the name of the route that we created in the app.js. In this case '/shop' and '/cart'.

The component should look like this:

import { Link } from "react-router-dom";
export function Nav() {
    return (
        <nav>
            <Link to='/'>Home</Link>
            <Link to='/shop'>Shop</Link>
            <Link to='/cart'>Cart</Link>
        </nav>
    );
}

If we remember correctly, we use href in common websites built in JavaScript to go from one page to another, redirecting us to another tab, making the website reload.

React works different since it is a single-page application that only reloads/updates the dynamic components and doesn't touch the component that is not changed.

Therefore, we can’t use the anchor tag with the href attribute. It’s easy to work with routes in React. In this article, we highlighted version 6 of React Router, which we can modify and will be useful in the future. 

Code example

Now is the time to put everything into practice and make it work.  Below is the entire project:

// jest-dom adds custom jest matchers for asserting on DOM nodes.
// allows you to do things like:
// expect(element).toHaveTextContent(/react/i)
// learn more: https://github.com/testing-library/jest-dom
import '@testing-library/jest-dom';
Setting up routes in basic shop application using React router v6

Explanation

  • index.js: We import BrowserRouter in line 4, then wrap the <App/> component with it in lines 10-12 to make all the components accessible to react router.
  • app.js: We added some routes in lines 15-19 linking us to the Home, Shop, and Cart page, respectively, importing the components in lines 5-8. Also imported Routes, Route from react-router-dom.
  • nav.js: Added some Links that allows moving within the website in lines 8-10. These act like the anchor tag and href attribute.
  • home.js, shop.js, and cart.js have some boilerplates to identify which page we are in. In line 6 each one of them, we added the <h1> with the corresponding page name.

Free Resources

License: Creative Commons-Attribution NonCommercial-ShareAlike 4.0 (CC-BY-NC-SA 4.0)