Creating navigation link in React JS using react-router-dom package




Git hub repo : avinashkumar-github/reactjs-clientside-routing-and-navbar-using-react-router-dom: A basic sample for the navigation bar and client side routing using React JS


Checkout the repo and run 'npm install' to install all dependency.


src/index.js

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./components/App";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />)


src/router/AppRouter.js

import {Routes, Route} from 'react-router-dom';
import ExpensifyCreate from '../components/ExpensifyCreate';
import ExpensifyDashboard from '../components/ExpensifyDashboard';
import ExpensifyEdit from '../components/ExpensifyEdit';
import ExpensifyHelp from '../components/ExpensifyHelp';
import PageNotFound from '../components/PageNotFound';


const AppRouter = () =>{
    return (
        <Routes>
            <Route path='/' element={<ExpensifyDashboard />} />
            <Route path='/create' element={<ExpensifyCreate />} />
            <Route path='/edit/:id' element={<ExpensifyEdit />} />
            <Route path='/help' element={<ExpensifyHelp />} />
            <Route path='*' element={<PageNotFound />} />
        </Routes>
    )
}

export default AppRouter;




src/component/App.js

import {BrowserRouter as Router} from 'react-router-dom';
import AppRouter from '../router/AppRouter';
import Footer from './Footer';
import Header from './Header';

const App = () =>{
    return (
        <Router>
            <Header />
            <AppRouter />
            <Footer />
        </Router>
    )
}


export default App;




src/component/Header.js

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

const Header = () => {
    return (
        <div>
            <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/
bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQ
TwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />

            <nav class="navbar navbar-expand-lg navbar-light bg-light">
                <div class="container-fluid">
                    <div class="collapse navbar-collapse" id="navbarNav">
                        <ul class="navbar-nav">
                            <li class="nav-item">
                                <Link to="/" class="nav-link">Home</Link>
                            </li>
                            <li>
                                <Link to="/create" class="nav-link">Create</Link>
                            </li>
                            <li class="nav-item">
                                <Link to="/edit/1" class="nav-link">Edit</Link>
                            </li>
                            <li>
                                <Link to="/help" class="nav-link">Help</Link>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
        </div>
    )
}

export default Header




src/component/Footer.js

const Footer = () => {
    return (
        <div>
            <script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2
/dist/js/bootstrap.bundle.min.js" integrity="
sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>
           
            <footer class="bg-light text-center text-lg-start">
                <div class="text-center p-3">
                    © 2022 Copyright
                </div>
            </footer>
        </div>
    )
}

export default Footer





src/component/ExpensifyCreate.js

const ExpensifyCreate = () => {
    return (
        <div>
            This is a create expensify page !!
        </div>
    )
}

export default ExpensifyCreate




src/component/ExpensifyDashboard.js

import React, {Component} from "react";

export default class ExpensifyDashboard extends Component{
    render(){
        return (
            <div>This is a Dashboard Page !!</div>
        )
    }
}




src/component/ExpensifyEdit.js

import {useParams} from 'react-router-dom';

const ExpensifyEdit = () => {
    let {id} = useParams();
    return (
        <div>
            This is a edit expensify page for UserID {id} !!
        </div>
    )
}

export default ExpensifyEdit;



src/component/Help.js

import {useNavigate} from 'react-router-dom';

const ExpensifyHelp = () => {
    let navigate = useNavigate();
    return (
        <div>
            This is a help page !!
            <button
            onClick={()=> {navigate('/')}}
            >
                Click to navigate
            </button>
        </div>
    )
}

export default ExpensifyHelp



src/component/PageNotFound.js

const PageNotFound = () => {
    return (
        <div>Page not found !!</div>
    )
}

export default PageNotFound




Output : run npm start