React router for DOM is a component that used in the navigations of a web page. Here we are going to see the react router with an example use case. And the hooks we can utilize which is came from the same library.

react router with an example

React

React is a JavaScript library for building user interfaces.

React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.

Declarative views make your code more predictable and easier to debug.

React Router

React Router is a fully-featured client and server-side routing library for React. React Router runs anywhere React runs; on the web, on the server with node.js, and on React Native.

In this react router with an example tutorial, we will

  • Create react application (Using CRA)
  • Install react-router-dom
  • Create sample components
  • Configure routes
  • Integrating Route Component
  • Navigating with links
  • Navigating programmatically

Note: Going forward, I will use npm (node package manager) to install and manage components. If you are a yarn lover, feel free to use yarn. The yarn usage documentation is here.

Create React application

In traditional way, we can create a react application by installing our require packages to run our app such as react, react-dom, webpack, etc. Then we manually add configuration and behaviors to the app to render it on the browser like we have to configure web pack (bundler tool). But now react makes it simple and handy. We no need to worry about the initial configuration and behaviors.

To do that, react introduces a new way called create-react-app. Create React App is an officially supported way to create single-page React applications. It offers a modern build setup with no configuration.

First we have to install this create-react-app package globally. Run the following code in your terminal or command prompt.

npm install -g create-react-app

This will install create-react-app globally. Then we have to create our desired application. Here for demonstration purpose, I will create an app with the name my-react-site. Navigate to your desired location in your computer and paste the code below to create a new react application (Please change application name as per your wish).

create-react-app my-react-site

This will take some to complete, behind the scenes create-react-app (cra) will install necessary packages and configure webpack and other settings. Once this completed go to the folder with the name of your application. In my case it is my-react-site. The folder structure will resemble the following

react router dom folder structure

Open this folder in your favorite editor like Visual Studio Code, Eclipse, etc. Now paste below code in your terminal to see your initial application on the screen.

npm start

Yayyy.. that’s it. We created our react application.

From now onwards, the changes you made on to the code will cause an browser refresh to change the content of your site.

Install react-router-dom

Now we have to install our react router, to do that paste the below command in your terminal

npm install react-router-dom

react-router is a core library for every environments like web app, dektop app, or mobile app. react-router-dom is specific to web application routing. So we are using this exclusively.

Sample components to route

Inside src folder create a folder called components and inside that folder create 4 new JavaScript files namely, Header.js, Home.js, Help.js, 404.js.

Now the src folder looks like follows,

react router dom src folder structure

Now fill up these component files with the following,

404.js

import React from "react";

const NotFoundPage = ()=>{

    return (
        <div>
            Your requested page not found :(
        </div>
    )
} 

export {NotFoundPage as default}

Header.js

import React from "react";

const Header = ()=>{

    return (
        <div>
            My React Site
        </div>
    )
}

export {Header as default}

Help.js

import React from "react";

const HelpPage = () =>{

    return (
        <div>
            <p>This is our help page</p>
        </div>
    )
}

export {HelpPage as default}

Home.js

import React from 'react'

const HomePage = () =>{

    return(
        <div>
            This is our home page.
        </div>
    )
}

export {HomePage as default}

Configure Routes

Create a new JavaScript page named router.js inside src folder. And add below code to the file.

import React from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Header from "./components/Header";
import Help from "./components/Help";
import Home from "./components/Home";
import NotFoundPage from "./components/404";


const AppRoute = ()=>{

    return(
        <BrowserRouter>
            <div>
                <Header />
                <Routes>
                    <Route path="/" element={<Home />} exact={true} />
                    <Route path="/help" element={<Help />} />
                    <Route path="*" element={<NotFoundPage />} />
                </Routes>
            </div>
        </BrowserRouter>
    )
}

export {AppRoute as default}

Now we consumed 3 named exports from react-router-dom library. They are,

BrowserRouter

The container which holds all our routes that we need to navigate throughout the application. This BrowserRouter component expects single component inside it.

Routes

This holds the individual route.

Route

This is the actual route component which expects 2 properties named path and element.

The path is the route in where our page need to be displayed. This will be available on the browser address bar after the host name. For example, https://mysite.com/help will be shown for the help page navigation.

The element attribute expects the component need to be rendered when this path called. Additionaly, we have exact attribute, which ensure the url match to the path exactly.

Note that, we used ‘*’ for the path attribute for the 404 page. This means, if no matching routes found on the routes list for the user entry, then fallback to the NotFound page.

Since BrowserRouter accepts only one child, and we have to show header for every page we used empty div tag to hold all components.

Integrating Route Component

Now we are going to integrate our route component to our react application.

On src folder, open the index.js page and modify the page as follows,

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import AppRoute from "./router";
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <AppRoute />
  </React.StrictMode>
);
reportWebVitals();

Note that, we removed the reference to App component from the imports and replaced the rendering component as AppRoute.

Now go to your browser and see your navigation in action. By default, the home page shown with the header. If you add help to the url, your help page will be shown.

Navigating with Links

Now modify the Header.js file as follows,

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

const Header = () => {

    return (
        <div>
            My React Site
            <div align="center">
                <Link to="/">Home</Link> {'  '}
                <Link to="/help">Help</Link>
            </div>
        </div>
    )
}

export { Header as default }

Now we have utilized another named export called “Link”. You can compare this Link component with the traditional <a> anchor tag.

This Link tag accepts two attributes. One is ‘to’ which expects the path of the page which is same as the path attribute value in the Route section. Next thing is the name of the route which can be any string value that represents the page name.

Now you can go to your browser and click the links that we just added. You will see the page navigates to the relevant pages.

The considerable difference between these two is the anchor tag, will causes the page refresh most of the cases for navigation. But here in react, that is not the case. You can notice no page renders happens while navigating through links.

Navigating programmatically

At this point, you are little bit familiar on react router with an example scenario discussed. Here is an one step further

Imagine, you want to navigate to the page when user performs some action. For example, you are working on the eCommerce website, in that when a customer clicks on the check out button, you have to perform some action like apply coupons, compute tax, etc. And finally you redirect the user to the payment page. How we can do that?

For the above scenario, we will create one more JavaScript file named Display.js inside src folder and add the following code

import React from "react";

const DisplayPage = () => {

    return (
        <div>
            The display page navigated programmatically.
        </div>
    )
}

export { DisplayPage as default }

Add this route information to route.js file

 <Route path="/display" element={<Display />} />

The route.js file looks like this,

react router dom route file structure

Now modify the Home.js file as follows,

import React from 'react'
import { useNavigate } from 'react-router-dom'

const HomePage = () => {

    let navigate = useNavigate()

    return (
        <div>
            <p>This is our Home page</p>
            <button onClick={() => {
                //
                // Other actions need to perform
                //
                navigate('/display')}}>Navigate</button>
        </div>
    )
}

export { HomePage as default }

Here you can see, we utilized a hook as a named export to navigate through our pages. To know more about React hooks click here.

The useNavigate hook has a index of pages in the route and when we specify the routes it will navigate us to the specified page.

As you can see, on the button click event, we navigated to another page such a way you can perform all your actions on the button click event then navigate to the desired page finally.

Cessation

Now we are end of this tutorial, hope you could understand the react router with an example shown above. The react-router-dom can be found in npm on this link.

To see more like this check here.

AK