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 { useState } from 'react';
import { Link } from 'react-router-dom'
import { Drawer, ToggleButton, ToggleButtonGroup, Toolbar, Typography, IconButton } from '@mui/material';
import ChecklistIcon from '@mui/icons-material/Checklist';
import InfoIcon from '@mui/icons-material/Info';
import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
import MenuIcon from '@mui/icons-material/Menu';
import './SideMenu.css';
export default function SideMenu() {
const [open, setOpen] = useState(true);
const [selectedButton, setSelectedButton] = useState('home');
const toggleDrawer = (x: boolean) => () => {
setOpen(x);
};
const handleSelection = (event: React.MouseEvent<HTMLElement>, newSelection: string) => {
if (newSelection !== null) {
setSelectedButton(newSelection);
}
};
return (
<>
<IconButton id='hideMenuButton' onClick={toggleDrawer(true)}>
<MenuIcon />
</IconButton>
<Drawer variant="persistent" open={open}>
<Toolbar id='menuHeader'>
<Typography variant="h6" color='info'>Items</Typography>
<IconButton onClick={toggleDrawer(false)}>
<ChevronLeftIcon />
</IconButton>
</Toolbar>
<ToggleButtonGroup
orientation="vertical"
value={selectedButton}
exclusive
onChange={handleSelection}
aria-label="navigation menu"
>
<ToggleButton
value="home"
component={Link}
to="/"
aria-label="home"
>
<ChecklistIcon color='success' />
Home
</ToggleButton>
<ToggleButton
value="about"
component={Link}
to="/about"
aria-label="about"
>
<InfoIcon color='warning' />
About
</ToggleButton>
</ToggleButtonGroup>
</Drawer>
</>
)
}
|
| src/SideMenu.css |
.MuiDrawer-root > div {
width: 140px;
background-color: rgb(39, 39, 47);
}
#hideMenuButton {
position: absolute;
top: 1rem;
left: 1rem;
}
#menuHeader {
justify-content: space-between;
}
a.MuiToggleButton-root {
justify-content: space-evenly;
margin: 0.25rem 1rem;
padding: 0.75rem 0;
border: 0;
border-radius: 8px !important;
}
|
Installation
|
npm i react-router-dom |
