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 { 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