How can you implement a sidebar or drawer navigation system using React Router

Question

With the help of code can i know How can you implement a sidebar or drawer navigation system using React Router?

Answer 1

To implement a sidebar or drawer navigation system using React Router, follow these precise steps:

1. Install Required Packages

npm install react-router-dom

2. Set Up Routes

// App.jsx or App.js

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

import Home from "./pages/Home";

import About from "./pages/About";

import Contact from "./pages/Contact";

import Sidebar from "./components/Sidebar";

function App() {

  return (

    <Router>

      <div style={{ display: "flex" }}>

        <Sidebar />

        <div style={{ flex: 1, padding: "20px" }}>

          <Routes>

            <Route path="/" element={<Home />} />

            <Route path="/about" element={<About />} />

            <Route path="/contact" element={<Contact />} />

          </Routes>

        </div>

      </div>

    </Router>

  );

}

export default App;

3. Create Sidebar Component

// components/Sidebar.jsx

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

function Sidebar() {

  return (

    <div style={{ width: "200px", background: "#f0f0f0", height: "100vh", padding: "20px" }}>

      <nav>

        <ul style={{ listStyle: "none", padding: 0 }}>

          <li><Link to="/">Home</Link></li>

          <li><Link to="/about">About</Link></li>

          <li><Link to="/contact">Contact</Link></li>

        </ul>

      </nav>

    </div>

  );

}

export default Sidebar;