React Router Dom v6

As we know React Router dom provides us to do Client Side rendering for our app. It is designed to work with the Single Page Application.

Components of React Router Dom v6

• BrowserRouter
• Routes
• Route

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import Providers from './providers';
import {BrowserRouter} from "react-router-dom";

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
       <Providers>
          <BrowserRouter>
                 <App />
           </BrowserRouter>
      </Providers>
  </React.StrictMode>
);

App.js

import React from "react";
import { Route, Routes } from "react-router-dom";
import Home from "./pages/home";

function App() {
  return (
    <>
      <Routes>
        <Route path="/" element={<Home />} />
      </Routes>
    </>
  );
}

export default App;

→ <Link> component

• Link component helps to render the page without loading it

How to Navigate between pages without Reload? Is there any functionality provides by react router dom for this

So the answer is yes! Link is the component provide by react router dom to navigate through pages without reloading

import React from 'react'
import { Link } from 'react-router-dom'

const Navbar = () => {
  return (
    <nav>
        <div>
            <ul>
                <Link to='/'><li>Home</li></Link>
                <Link to='/about'><li>About</li></Link>
                <Link to='/contact'><li>Contact</li></Link>
            </ul>
        </div>
    </nav>
  )
}

export default Navbar

→ NavLink Component

• NavLink allows us to give the information about active link.
• It adds active class for the link that is currently active so that we can use css to distinguish it

import React from 'react'
import {  NavLink } from 'react-router-dom'
import './Navbar.css'
const Navbar = () => {
  return (
    <nav>
        <div>
            <ul>
                <NavLink to='/'><li>Home</li></NavLink>
                <NavLink to='/about'><li>About</li></NavLink>
                <NavLink to='/contact'><li>Contact</li></NavLink>
            </ul>
        </div>
    </nav>
  )
}

export default Navbar

.active{
    color: chartreuse;
}

→ Defining Error Page

We use (*) to define the route for all other websites than defined ones.

<Route path="*" element={<Error />} />

→ Nested Routing

Route inside Route is known as Nested Routing

 <Routes>
        <Route path="/" element={<Home />} >
          <Route path="/about" element={<About />} />
          <Route path="/contact" element={<Contact />} />
          <Route path="*" element={<Error />} />
        </Route>
 </Routes>

→ Shared Layout

<Outlet /> → gives that route data as well as it’s parent data too

index -> attribute is used to show the data of home page at parent index

App.jsx

import React from "react";
import { Route, Routes } from "react-router-dom";
import Home from "./pages/home";
import About from "./pages/about";
import Contact from "./pages/contact";
import Error from "./pages/error";
import Header from "./components/Header";

function App() {
  return (
    <>
      <Routes>
        <Route path="/" element={<Header />} >
          <Route index element={<Home />} />
          <Route path="/about" element={<About />} />
          <Route path="/contact" element={<Contact />} />
          <Route path="*" element={<Error />} />
        </Route>
      </Routes>
    </>
  );
}

export default App;

Header.jsx

import React from 'react'
import Navbar from '../Navbar'
import { Outlet } from 'react-router-dom'

export default function Header() {
  return (
    <div>
        <Navbar />
        <Outlet />
    </div>
  )
}

→ useNavigate() hook

used to navigate from one page to another page using some button click

For going on previous page we use navigate(-1)