React Router v-6

How to Install React Router

To install React Router run npm install react-router-dom@6 in your react project terminal
If you are using yarn then use this command: yarn add react-router-dom@6.

Set Up

To do this, open the index.js file in the src folder and import BrowserRouter from react-router-dom and then wrap the root component

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

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

How to Route to Other Components

Step 1 : Create multiple components

We'll create the following Home , About ,and Contact components like this:

Home component

const Home=()=> {
  return (
    <div>
      <h1>This is the home page</h1>
    </div>
  );
}

export default Home;

About component

const About=()=> {
  return (
    <div>
      <h1>This is the About page</h1>
    </div>
  );
}

export default About;

Contact component

const Contact=()=> {
  return (
    <div>
      <h1>This is the Contact page</h1>
    </div>
  );
}

export default Contact;

Step 2 : Define routes

The Appcomponent acts as the root component that our React code initially renders, so we will create all our routes there.

import { Routes, Route } from "react-router-dom"
import Home from "./Home"
import About from "./About"
import Contact from "./Contact"

function App() {
  return (
    <div>
      <Routes>
        <Route path="/" element={ <Home/> } />
        <Route path="/about" element={ <About/> } />
        <Route path="/contact" element={ <Contact/> } />
      </Routes>
    </div>
  )
}

export default App

Routesacts as a container for all the individual routes that created in the app.

Routeis used to create a single route, It takes in two attributes:

1. path which specifies the URL path of the desired component. you'll notice that the first pathname is a backslash (/)which will get rendered first whenever the app loads for the first time. This implies that the Home component will be the first component to get rendered.

2. element which specifies the component the route should render.

Step 3 : navigate to routes

We will use Linkto navigate between pages/components
The Link component is like element <a> in HTML. Its to attribute specifies which path the link takes you to.

we will create a new component called Navbar.js like this and navigate between components

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

const Navbar=()=> {
  return (
    <div>
      <h1>This is the home page</h1>
      <Link to="/about">Click to view our about page</Link>
      <Link to="/contact">Click to view our contact page</Link>
    </div>
  );
}

export default Navbar;

So the Appcomponent will be like this

import { Routes, Route } from "react-router-dom"
import Home from "./Home"
import About from "./About"
import Contact from "./Contact"
import Navbar from "./Navbar"
function App() {
  return (
    <div>
      <Navbar/>
      <Routes>
        <Route path="/" element={ <Home/> } />
        <Route path="/about" element={ <About/> } />
        <Route path="/contact" element={ <Contact/> } />
      </Routes>
    </div>
  )
}

export default App