useNavigate, useParams hook in react Js

useNavigate React Hook

Home.js

import React from 'react'
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import About from './About';
import Error from './Error';
import Index from './Index';
import Navbar from './Navbar';
export const Home = () => {
    return (
        <div>
            <BrowserRouter>
                <Navbar />
                <Routes>
                    <Route path="/"/>
                    <Route path="/home" element={<Index />} />
                    <Route path='/about' element={<About />} />
                    <Route path='*' element={<Error />} />
                </Routes>
            </BrowserRouter>
        </div>
    )
}
export default Home;

About.js

import React from 'react'
import {useNavigate } from 'react-router-dom'
export const About = () => {
    const navigate = useNavigate();
    return (
        <div>
            <h1>this is about page</h1>
            <button className="btn btn-primary" onClick={()=>{
                navigate('/home')
            }}>
                Go To Home
            </button>
        </div>
    )
}
export default About;

Index.js

import React from 'react'
import { useLocation } from 'react-router-dom';
export const Index = () => {
    const location = useLocation();
    console.log(location)
    return (
        <div>
            <h1>This is the {location.pathname.replace("/", '')} page</h1>
        </div>
    )
}
export default Index;

Error.js

import React from 'react'
export const Error = () => {
    return (
        <>
            <div className="container my-5">
                <h1>404</h1>
            </div>
        </>
    )
}
export default Error;

Navbar.js

import React from 'react'
import { Link } from 'react-router-dom';
export const Navbar = () => {
    return (
        <div>
            <ul><li>
                    <Link to="/">main</Link>
                </li>
                <li>
                    <Link to="/home">Home</Link>
                </li>
                <li >
                    <Link to="/about">About</Link>
                </li>
            </ul>
        </div>
    )
}
export default Navbar;

useParams hook in ReactJS
Home.js

import React from 'react'
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import About from './About';
import Error from './Error';
import Index from './Index';
import Navbar from './Navbar';
export const Home = () => {
    return (
        <div>
            <BrowserRouter>
                <Navbar />
                <Routes>
                    <Route path="/"/>
                    <Route path="/home" element={<Index />} />
                    <Route path='/about/:username' element={<About />} />
                    <Route path='*' element={<Error />} />
                </Routes>
            </BrowserRouter>
        </div>
    )
}
export default Home;

About.js

import React from 'react'
import {useNavigate, useParams } from 'react-router-dom'
export const About = () => {
    const navigate = useNavigate();
    const { username } = useParams();
    return (
        <div>
            <h1>this is {username }</h1>
            <button className="btn btn-primary" onClick={()=>{
                navigate('/home')
            }}>
                Go To Home
            </button>
        </div>
    )
}
export default About;