React Router Dom V6 — An Overview

Routing is the process that allows the navigation among the components inside the application by changing the url’s depending upon the user’s action. It also keeps the UI in sync with the url change.

Before we get into the code, let’s define some key terms in react routing.

<BrowserRouter>

There are different types of routers in the React router dom like BrowserRouter, HashRouter, etc., but here we are going to use only BrowserRouter, which considers everything after the top-level domain as a route.

It is very important to define which routing technique we are going to use in our application. So we need to wrap all the routing contents inside the <BrowserRouter></BrowserRouter>.

<Routes>

It is very obvious that we will be having multiple routes in our react application. So we will be wrapping each and every route under the <routes></routes> tag.

<Route>

Defines an individual route where each and every route represents its own corresponding url under which the respective components will be displayed. You can also do nesting in ‘Route’ by wraping a number of routes inside a singe route which helps you in building your layout.

<Outlet>

This is the place where the components in the routes that are inside the layouts will be displayed.

<Link>

Link tag is used to navigate among the pages. <Link to=”/”>Home</Link> would navigate to ‘/’ which display’s the ‘Home’ component.

Implementation

First of all, create a react project with the below command.

npx create-react-app react-router

Then enter the project to start coding.

cd react-router

The initial route configuration will be done in the App.js file. Create a folder ‘Components’ inside the ‘src’ folder. Then I will be creating three components inside ‘Components’ folder to let you know how it works.

Components/Home.jsx and Components/About.jsx are simple functional components.

The Layout configuration has been done in Components/Layout.jsx which wraps Home and About components. <Outlet /> will be provided inside the Layout where the contents of components Home and About will be placed.

App.js

import './App.css';
import { BrowserRouter, Routes, Route } from 'react-router-dom'
import Home from './Components/Home'
import About from './Components/About'
import Layout from './Components/Layout'
function App() {
return (
<div className="App">
    <BrowserRouter>
        <Routes>
            <Route path="/" element={<Layout />}>
                <Route path="/" element={<Home />} />
                <Route path="about" element={<About />} />
            </Route>
        </Routes>
    </BrowserRouter>
</div>
);
}
export default App;

Layout.jsx

import { Outlet, Link } from 'react-router-dom'
export default function Layout() {
    return (
        <>
            <Link to="/">Home</Link>&nbsp;&nbsp;&nbsp;
            <Link to="/about">About</Link>
            <Outlet />
        </>
    )
}

Home.jsx

export default function Home() {
    return (
        <>
            <p>This is Home</p>
        </>
    )
}

About.jsx

export default function About() {
    return (
        <>
            <p>This is About Us</p>
        </>
    )
}

Type the below command to run the project,

npm start

We have just done a simple routing in react.

Thank you for reading this article!