React router
De Banane Atomic
Aller à la navigationAller à la recherche
Links
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 |
