How to Install React-Router and Use It?

React Router is the routing library for React. It is a collection of routing components. It used to navigate the website from one page to another page.

Many latest websites using this SPAs (Single Page Applications) technology, and in this technology, react-router conditionally renders components for all different pages without refreshing the whole page.

Table of Contents

1 Install React-Router

2 Uses of React-Router

Install React-Router

To use react-router, you have to install React-Router with the help of NPM (Node Packages Manager) or Yarn.

Note: If your machine don’t have NPM installed then read article here. In this article I have explained how you can setup enviorment for reactjs application.

Let’s start with install React-Router.

To install it run this command in your terminal.

npm install react-router-dom

It will install the required dependency to use navigate the website. You can check your package.json file. It will show all dependency that you have installed.

Uses of React-Router

Next, you have to create new component file OR can test in your src/App.js file. In this file, import the BrowserRouter, Route, and Switch from react-router-dom.

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

Let’s understand with examples, how we can use it?

In the example, let’s suppose we have a website and navigation like
Home Services About Contact

These navigation pages handled by the router, and when you click on these links (<Link>) then the router will render the certain component based on the URL (<Route>).

Check the below examples of react-router navigation.

Example #1: Basic Routing

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';

export default function App() {
  return (
    <router>
      <div>
        <nav>
          <ul>
            <li>
              <link to="/">Home
            </li>
            <li>
              <link to="/services">Services
            </li>
            <li>
              <link to="/about">About
            </li>
            <li>
              <link to="/contact">Contact
            </li>
          </ul>
        </nav>

        <switch>
          <route path="/">
            <home></home>
          </route>
          <route path="/services">
            <services></services>
          </route>
          <route path="/about">
            <about></about>
          </route>
          <route path="/contact">
            <contact></contact>
          </route>
        </switch>
      </div>
    </router>
  );
}

function Home() {
  return <h1>Home</h1>;
}

function Services() {
  return <h1>Services</h1>;
}

function About() {
  return <h1>About</h1>;
}

function Contact() {
  return <h1>Users</h1>;
}

In the above example we used
=> <Router> (refer to <BrowserRouter>)
=> <Link>
=> <Switch>

All Routes will render inside the Router, and <Link> is used for making hyperlinks same as we do with anchor tag (<a>). We can also use this instead of <Link>.

And <Switch> is used for making conditioning between Links and Route and show the certain component based on the requested URL as a result.

This is the basic example of routing navigation with React-Router.

Let’s see another example of Nested Routing:

Example #2: Nested Routing

Nested Routing means navigation has a submenu under the main menu. As we declared above navigation link
Home Services About Contact

But now, suppose the services menu has more menus under this, as called submenu like
Service 1 Service 2 Service 3

So, how we will make this navigation and render the component based on the submenu with parameter ID?

Look at the example for nested routing.

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch, Link, useRouteMatch, useParams } from 'react-router-dom';

export default function App() {
  return (
    <router>
      <div>
        <nav>
          <ul>
            <li>
              <link to="/">Home
            </li>
            <li>
              <link to="/services">Services
            </li>
            <li>
              <link to="/about">About
            </li>
            <li>
              <link to="/contact">Contact
            </li>
          </ul>
        </nav>

        <switch>
          <route path="/">
            <home></home>
          </route>
          <route path="/services">
            <services></services>
          </route>
          <route path="/about">
            <about></about>
          </route>
          <route path="/contact">
            <contact></contact>
          </route>
        </switch>
      </div>
    </router>
  );
}

function Home() {
  return <h1>Home</h1>;
}

function Services() {
  let match = useRouteMatch();

  return (
    <div>
      <h1>Services</h1>

      <ul>
        <li>
          <link to="{`${match.url}/service-1`}">Service 1
        </li>
        <li>
          <link to="{`${match.url}/service-2`}">Service 2
        </li>
        <li>
          <link to="{`${match.url}/service-3`}">Service 3
        </li>
      </ul>

      <switch>
        <route path="{`${match.path}/:service`}">
          <service></service>
        </route>
        <route path="{match.path}">
          <h5>Please select a service.</h5>
        </route>
      </switch>
    </div>
  );
}

function Service() {
  let { service } = useParams();
  return <h5>You selected {service} service.</h5>;
}

function About() {
  return <h1>About</h1>;
}

function Contact() {
  return <h1>Users</h1>;
}

In the above example, we imported 2 more library from react-router-dom.

=> useRouteMatch()
=> useParams()

useRouteMatch hook gives the access to match with the current URL, and get URL property from its object. And useParams used to return the value from URL parameters.

Note: There is more attributes for navigation link like exact, strict, isActiveetc. You can check here.

So, in this article, we learned how to install React-Router and Programmatically navigate using React-Router.

Hope you understand this code. If you have any query please comment out, I’ll help you with that.

2 Comments

Hi Aman

I couldn’t make sense of this, but perhaps because I am starting in a different place. I have some code with hrefs eg,,,

which I need to replace.

I have installed router-dom and imported Router into my App.js file – but how do I link to the page I want?

best regards

Stephen

Aman Mehra says:
August 20, 2021 at 2:34 pm
create a component of your page and export it then use the <Link to=”/page-path”> to derive your page path and use <route></route> for component render.
Reply

Cookie	Duration	Description
cookielawinfo-checkbox-analytics	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional	11 months	The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy	11 months	The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.

How to Install React-Router and Use It?

Install React-Router

Uses of React-Router

About the Author: Aman Mehra

2 Comments

Leave a Reply Cancel reply

Install React-Router

Uses of React-Router

You May Also Like

How to Change Apply Coupon Button Text In WooCommerce?

How to Create a Right-Click Context Menu in React?

How to Create Custom Back Button with React Router?

How to Create a Blog Post Template in WordPress?

How to Remove OBJ Box From Title and URL in WordPress

How to Check If Checkbox is Checked or Not in jQuery?

About the Author: Aman Mehra

2 Comments

Leave a Reply Cancel reply