React router

Links

• React Router

Example

src/App.tsx

import { BrowserRouter, Link, Route, Routes } from "react-router-dom"; import Home from './pages/Home.tsx'; import About from './pages/About.tsx'; import SideMenu from './SideMenu'; export default function App() { return ( <BrowserRouter> {/* use basic menu */} <nav style={{ margin: '20px' }}> <Link to="/" style={{ marginRight: '10px' }}>Home</Link> <Link to="/about" style={{ marginRight: '10px' }}>About</Link> </nav> {/* or the side menu */} <SideMenu /> <Routes> <Route path="/" element={<Home />} /> <Route path="/about" element={<About />} /> </Routes> </BrowserRouter> ) }

src/SideMenu.tsx

import { Drawer, List, ListItem, ListItemButton, ListItemIcon, ListItemText, Toolbar, Typography, Divider } from '@mui/material'; import { Link } from 'react-router-dom' import ChecklistIcon from '@mui/icons-material/Checklist'; import InfoIcon from '@mui/icons-material/Info'; const drawerWidth = 240; export default function SideMenu() { return ( <Drawer sx={{ width: drawerWidth, flexShrink: 0, '& .MuiDrawer-paper': { width: drawerWidth, boxSizing: 'border-box', }, }} variant="permanent" anchor="left" className='sideMenu' > <Toolbar> <Typography variant="h6">Items</Typography> </Toolbar> <Divider /> <List> <ListItem disablePadding component={Link} to="/"> <ListItemButton> <ListItemIcon> <ChecklistIcon /> </ListItemIcon> <ListItemText primary="Items" /> </ListItemButton> </ListItem> <ListItem disablePadding component={Link} to="/about"> <ListItemButton> <ListItemIcon> <InfoIcon /> </ListItemIcon> <ListItemText primary="About" /> </ListItemButton> </ListItem> </List> </Drawer> ) }

Installation

npm i react-router-dom