MUI Persistent Drawer - Routing Issues

Question

I want to create a persistent drawer using the material-ui library on react. I have created a partial navbar and i was testing if i could route to other pages if i click the buttons. The address routes properly if i click on the buttons, however, i am unable to see the content of those pages. This is my first time working with react in general, so i am not sure where im going wrong and i would really appreciate some assistance.

This is the code i have so far:

App.js:

function App() {

  return (
    <div>
      <Box sx={{display: 'flex'}}>
        <NavBar>
          <Routes>
            <Route exact path='/' element={<Navigate to='/home' />} />
            <Route exact path='/home' element={<HomePage />} />
            <Route exact path='/clients' element={<ClientsPage />} />
            <Route exact path='/resources' element={<ResourcesPage />} />
            <Route exact path='/projects' element={<ProjectPage />} />
          </Routes>
        </NavBar>
      </Box>
    </div>
  )
}

export default App;

index.js:

ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);

NavBar.js:

const drawerWidth = 240;

const useStyles = makeStyles({
    drawer: {
        width: drawerWidth
    },
    drawerPaper: {
        width: drawerWidth
    },
    root: {
        display: 'flex'
    }
})

export const NavBar = () => {

    const classes = useStyles()
    const navigate = useNavigate()
  
    const [open, setOpen] = useState(true)
  
    const menuItems = [
        {
            text: 'Home',
            icon:  <Home sx={{ color: orange[500] }} />,
            path: '/home',
            component: <HomePage />
        },
        {
            text: 'Projects',
            icon:  <Work sx={{ color: orange[500] }} />,
            path: '/projects',
            component: <ProjectPage />
        },
        {
            text: 'Clients',
            icon:  <People sx={{ color: orange[500] }} />,
            path: '/clients',
            component: <ClientsPage />
        },
        {
            text: 'Resources',
            icon:  <Settings sx={{ color: orange[500] }} />,
            path: '/resources',
            component: <ResourcesPage />
        }
    ]

    return (
        <>
        <Grid container>
            <div className={classes.root}>
                <Drawer className={classes.drawer} variant="persistent" anchor="left" open={open} classes={{paper: classes.drawerPaper}}>
                    <div>
                        <Typography variant="h5">
                            Navigation
                        </Typography>
                        <List>
                            {menuItems.map(item => (
                                <ListItem key={item.text} button onClick={() => navigate(item.path)}>
                                    <ListItemIcon> {item.icon} </ListItemIcon>
                                    <ListItemText primary={item.text} />
                                </ListItem>
                            ))}
                        </List>
                    </div>
                </Drawer>
            </div>
        </Grid>
        </>
    )
  }

The HomePage, and all the other pages being called is just a header tag which says Hello . I cannot see the Hello when i click on the buttons. Thank you guys for the help!

Answer 1

After looking at my code for a while, i figured what the error was. The Navbar was routing to the page, which was right, but i was not displaying the contents of the page. The great part was I was unconsciously wrapping my router and all the routes in NavBar component, so all i had to do was pass a prop called children like this:

export const NavBar = ({children}) => {
    //code here
}

and then after i finish with the drawer, just add a small div where i display the children. So it would look like this:

</Drawer>
<div>
   {children}
</div

The UI is still a bit messy, but the content of the pages are being shown.