Implementation of React Router v6

Example: Below is the code to create the navbar and routes.

CSS

/* App.css */
 
nav {
    background-color: #333;
    padding: 10px;
}
 
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
 
li {
    display: inline;
    margin-right: 20px;
}
 
a {
    text-decoration: none;
    color: white;
}
 
a:hover {
    color: lightgray;
}

Javascript

// NavBar.js
import { Link } from 'react-router-dom'; 
 
const Navbar = () => {
    return (
        <nav>
            <ul>
                <li><Link to="/">Home</Link></li>
                <li><Link to="/about">About</Link></li>
                <li><Link to="/contact">Contact</Link></li>
            </ul>
        </nav>
    );
}
 
export default Navbar;

Javascript

// index.js
import React from 'react'
import ReactDOM from 'react-dom/client'
 
import {
    RouterProvider,
    createBrowserRouter
} from 'react-router-dom'
 
import App from './App'
import Home from './Home'
import About from './About'
import Contact from './Contact'
 
const router = createBrowserRouter([
    {
        path: '/',
        element: <App />,
        children: [
            {
                path: '/',
                element: <Home />,
            },
            {
                path: '/about',
                element: <About />,
            },
            {
                path: '/contact',
                element: <Contact />,
            },
        ]
    }
]);
 
ReactDOM.createRoot(document.getElementById('root')).render(
    <RouterProvider router={router}>
        <App />
    </RouterProvider>
)

Javascript

// App.js
import { Outlet } from 'react-router-dom';
import './App.css'
import NavBar from "./NavBar";
 
const App = () => {
    return (
        <>
            <NavBar />
            <Outlet />
        </>
    );
}
 
export default App;

Javascript

// Home.js
import React from 'react'
 
const Home = () => {
    return (
        <div>Home</div>
    )
}
 
export default Home

Javascript

// About.js
import React from 'react'
 
const About = () => {
    return (
        <div>About</div>
    )
}
 
export default About

Javascript

// Contact.js
import React from 'react'
 
const Contact = () => {
    return (
        <div>Contact</div>
    )
}
 
export default Contact

Start your application using the following command.

npm start

Output:

Output

How to setup React Router v6 ?

React Router is an amazing library that was created by Remix. The purpose of React Router is to enable Client-Side routing in the React application, that is, by using React Router we can create different routes in our React app and can easily navigate to different pages without even reloading the page.

Client-side routing, facilitated by React Router, enables changing routes without page reloads, creating single-page applications (SPAs). React Router efficiently manages what is displayed on each route, making it a powerful and user-friendly library for seamless navigation in React applications.

We will discuss the following setup approach and different methods of React Router v6 in this article:

Table of Content

Approach to setup React Router in Application
Steps to set up React Router
Implementation of React Router v6
Nested Routes
useNavigate()
DynamicRoutes
createRoutesFromElements

Tags:

#ReactJS-Router #ReactJS #Web Technologies

Steps to set up React Router:

Nested Routes:

Implementation of React Router v6

CSS

Javascript

Javascript

Javascript

Javascript

Javascript

Javascript

How to setup React Router v6 ?

Similar Reads

Contact Us