Routing in React using React-Router Version 6

- Thursday, December 30, 2021

What is Routing?

- The process of navigating a user to different pages based on their request is known as routing.

- Routing is a process of binding a web URL to specific resource. In react we can say, "it is a binding of URL to a specific component.

- As react is a user interface library, it does not support routing.

- In this post, we will learn about "routing in react using react-router-dom library version 6".

Install React Router Command

npm install react-router-dom --save

Main component used for Navigation

1) BrowserRouter as Router - top level component

2) Routes - Replacement of Switch component.

3) Route - child component of Routes, useful for mapping a specific URL to a component.

4) Link - Similar to anchor tag in html.

Note:

Switch Component is deprecated from version 6. The new component is introduced called as Routes.

routing-in-react-using-react-router-version-6

Multiple Routing in React Js

Installation:

npm install react-router-dom --save

Sample Code:

A) App.js

import React from 'react';
import { BrowserRouter, Routes, Route, Link, Navigate } from 'react-router-dom';
import Home from './Home';
import About from './AboutUs';
import ContactUs from './ContactUs';
import PageNotFound from './PageNotFound';

function App() {
  return (
    <BrowserRouter>
      <nav id="navbar">
        <Link id="link1" to="/">
          Home
        </Link>
        <Link id="link2" to="about">
          About Us
        </Link>
        <Link id="link3" to="contact">
          Contact Us
        </Link>
      </nav>

      <Routes>
        <Route exact path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<ContactUs />} />
        <Route path="*" element={<PageNotFound />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

B) Home.js

import React from 'react';
import './style.css';

function Home() {
  return <div id="home">Home Page Body</div>;
}

export default Home;

C) AboutUs.js

import React from 'react';
import './style.css';

const AboutUs = () => {
  return <div id="aboutus">About Us Page</div>;
};

export default AboutUs;

D) ContactUs.js

import React from 'react';
import './style.css';

function ContactUs() {
  return <div id="contactus">Contact Us Page</div>;
}

export default ContactUs;

E) PageNotFound.js

import React from 'react';

function PageNotFound() {
  return <div id="pagenotfound">Page Not Found Page</div>;
}

export default PageNotFound;

F) style.css

#home,
#aboutus,
#contactus,
#pagenotfound {
  border: 1px solid black;
  width: 250px;
  height: 100px;
  line-height: 100px;
  align-items: center;
  justify-content: center;
  padding-left: 150px;
}

#navbar {
  margin-left: 1px;
  margin-bottom: 5px;
  width: 395px;
  border: 1px solid black;
  padding: 2px;
  background-color: black;

}

#link1,
#link2,
#link3 {
  padding: 20px;
  color: orange;
}

G) package.json

{
  "name": "routing-in-react",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^6.2.1",
    "react-scripts": "5.0.0",
    "web-vitals": "^2.1.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }
}