title: Making sidebar available for all components | React JS | React Router v6
body: <p>I am using react router dom v6 and want to implement a logic where the sidebar will be available across all the components in my. Currently whenever i try to click any in side bar the side bar is vanishing.
  I want to keep the side bar across all the components in my app.</p>
  <p>Side Bar available</p>
  <p><a href="https://i.stack.imgur.com/F7Hiu.png" rel="noreferrer"><img src="https://i.stack.imgur.com/F7Hiu.png" alt="" /></a></p>
  <p>Sidebar gone</p>
  <p><a href="https://i.stack.imgur.com/XATNP.png" rel="noreferrer"><img src="https://i.stack.imgur.com/XATNP.png" alt="" /></a></p>
  <p>Index.js</p>
  <pre><code>    import React from 'react';
      import ReactDOM from 'react-dom';
      import './index.css';
      import App from './App';
  
      import {BrowserRouter as Router,    Routes, Route,Navigate,Link} from
     'react-router-dom'; import Login from
     '../src/components/Login/LoginPage'; import Test from
     '../src/components/test/Test'; import Homepage from
     '../src/components/homepage/HomePage'; import Scheduler from
     '../src/components/scheduler/Scheduler'; import Classroom from
     '../src/components/classroom/Classroom'; import Assignment from
     '../src/components/assignment/Assignment'; import Meeting from
     '../src/components/meetings/Meetings'; import ReportCard from
     '../src/components/reportcard/ReportCard'; import SideMenuBar from
     '../src/components/sidemenubar/SideMenuBar'; ReactDOM.render(
  
      &lt;Router&gt;
        &lt;Routes&gt;
          &lt;Route path='/' element={&lt;Login /&gt;} /&gt;
          &lt;Route path='/api/v1/testpath' element={&lt;Test /&gt;} /&gt;
          {/* Sidebar Routes */}
          &lt;Route path=&quot;/api/v1/app/userHome&quot; exact element={&lt;Test /&gt;} /&gt;
          &lt;Route path=&quot;/api/v1/app/schedule&quot; exact element={&lt;Scheduler /&gt;} /&gt;
          &lt;Route path=&quot;/api/v1/app/myclassroom&quot; exact element={&lt;Classroom /&gt;} /&gt;
          &lt;Route
            path=&quot;/api/v1/app/myassignments&quot;
            exact
            element={&lt;Assignment /&gt;}
          /&gt;
          &lt;Route path=&quot;/api/v1/app/mymeetings&quot; exact element={&lt;Meeting /&gt;} /&gt;
          &lt;Route path=&quot;/api/v1/app/viewreports&quot; exact element={&lt;ReportCard /&gt;} /&gt;
        &lt;/Routes&gt;
      &lt;/Router&gt;,
  
  
    document.getElementById('root')
  );
  </code></pre>
  <p>Sidebar.js</p>
  <pre><code>import {
    ListItemIcon,
    ListItemText,
    List,
    Divider,
    Drawer,
    Avatar,
    Box,
    ListItemButton,
  } from &quot;@mui/material&quot;;
  import { makeStyles } from &quot;@mui/styles&quot;;
  
  import HomeIcon from &quot;@mui/icons-material/Home&quot;;
  import WatchLaterIcon from &quot;@mui/icons-material/WatchLater&quot;;
  import GroupsIcon from &quot;@mui/icons-material/Groups&quot;;
  import AssignmentOutlinedIcon from &quot;@mui/icons-material/AssignmentOutlined&quot;;
  import AssessmentOutlinedIcon from &quot;@mui/icons-material/AssessmentOutlined&quot;;
  import LogoutOutlinedIcon from &quot;@mui/icons-material/LogoutOutlined&quot;;
  import MeetingRoomOutlinedIcon from &quot;@mui/icons-material/MeetingRoomOutlined&quot;;
  
  import Logo from &quot;./logo.png&quot;;
  
  import { BrowserRouter as Router, Route, Link, Routes } from &quot;react-router-dom&quot;;
  import Homepage from &quot;../homepage/HomePage&quot;;
  import Scheduler from &quot;../scheduler/Scheduler&quot;;
  import Classroom from &quot;../classroom/Classroom&quot;;
  import Assignment from &quot;../assignment/Assignment&quot;;
  import ReportCard from &quot;../reportcard/ReportCard&quot;;
  import Meeting from &quot;../meetings/Meetings&quot;;
  const drawerWidth = 350;
  const useStyles = makeStyles({
    page: {
      background: &quot;#f9f9f9&quot;,
      width: &quot;100%&quot;,
    },
    root: {
      display: &quot;flex&quot;,
    },
    drawer: {
      width: drawerWidth,
    },
    drawerPaper: {
      width: drawerWidth,
      borderRadius: &quot;2%&quot;,
    },
    listitem: {
      &quot;&amp;:hover&quot;: {
        fontWeight: &quot;fontWeightBold&quot;,
        background: &quot;#f9f9f9&quot;,
      },
    },
    navlink: {
      textDecoration: &quot;inherit&quot;,
      color: &quot;inherit&quot;,
    },
  });
  
  export default function Sidemenubar() {
    const classes = useStyles();
  
    return (
      &lt;Box sx={{ display: &quot;flex&quot; }}&gt;
        &lt;Divider /&gt;
  
        &lt;Drawer
          className={classes.drawer}
          variant=&quot;permanent&quot;
          classes={{ paper: classes.drawerPaper }}
          anchor=&quot;left&quot;
        &gt;
          {/*App Logo */}
          &lt;Avatar
            src={Logo}
            alt=&quot;404&quot;
            sx={{ width: 100, height: 100, alignSelf: &quot;center&quot;, margin: 1 }}
          /&gt;
          {/*Menu Items */}
  
          &lt;List component=&quot;nav&quot;&gt;
            &lt;Link to=&quot;/api/v1/app/userHome&quot; className={classes.navlink}&gt;
              &lt;ListItemButton
                sx={{
                  &quot;&amp;:hover&quot;: {
                    fontWeight: &quot;bold&quot;,
                    boxShadow: 1,
                    background: &quot;#6D62DA&quot;,
                  },
                }}
              &gt;
                &lt;ListItemIcon&gt;
                  &lt;HomeIcon /&gt;
                &lt;/ListItemIcon&gt;
                &lt;ListItemText primary=&quot;Home&quot; /&gt;
              &lt;/ListItemButton&gt;
            &lt;/Link&gt;
            &lt;Divider /&gt;
            &lt;Link to=&quot;/api/v1/app/schedule&quot; className={classes.navlink}&gt;
              &lt;ListItemButton
                sx={{
                  &quot;&amp;:hover&quot;: {
                    fontWeight: &quot;bold&quot;,
                    boxShadow: 1,
                    background: &quot;#6D62DA&quot;,
                  },
                }}
              &gt;
                &lt;ListItemIcon&gt;
                  &lt;WatchLaterIcon /&gt;
                &lt;/ListItemIcon&gt;
                &lt;ListItemText primary=&quot;Scheduler&quot; /&gt;
              &lt;/ListItemButton&gt;
            &lt;/Link&gt;
            &lt;Divider /&gt;
          &lt;/List&gt;
        &lt;/Drawer&gt;
        &lt;Routes&gt;
        &lt;Route path='/api/v1/app/userHome' element={&lt;Homepage /&gt;}&gt;&lt;/Route&gt;
          &lt;Route path='/api/v1/app/schedule' element={&lt;Scheduler /&gt;}&gt;&lt;/Route&gt;
        &lt;/Routes&gt;
      &lt;/Box&gt;
    );
  }
  </code></pre>
  <p>HomePage.js</p>
  <pre><code>import React from 'react';
  import { Grid } from &quot;@mui/material&quot;;
  import SideMenuBar from '../sidemenubar/SideMenuBar';
  import HomePage from '../homepage/HomePage';
  import Scheduler from '../scheduler/Scheduler';
  import {BrowserRouter as Router, 
      Routes, Route,Navigate,Link} from 'react-router-dom';
  class Test extends React.Component{
      render(){
          return (
              &lt;Grid container&gt;
                  &lt;Grid item md={4}&gt;
                      &lt;SideMenuBar /&gt;
                  &lt;/Grid&gt;
                  
                  &lt;Grid item md={8}&gt;
                      &lt;HomePage /&gt;
                  &lt;/Grid&gt;
                  
              &lt;/Grid&gt;
          )
      }
  }
  
  export default Test;
  </code></pre>