« React router » : différence entre les versions
De Banane Atomic
Aller à la navigationAller à la recherche
(Page créée avec « Category:React = Links = * [https://reactrouter.com/en/main/start/overview React Router] = Installation = <kode lang='bash'> npm i react-router-dom </kode> ») |
Aucun résumé des modifications |
||
| Ligne 2 : | Ligne 2 : | ||
= Links = | = Links = | ||
* [https://reactrouter.com/en/main/start/overview React Router] | * [https://reactrouter.com/en/main/start/overview React Router] | ||
= Example = | |||
<filebox fn='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> | |||
<SideMenu /> | |||
<Routes> | |||
<Route path="/" element={<Home />} /> | |||
<Route path="/about" element={<About />} /> | |||
</Routes> | |||
</BrowserRouter> | |||
) | |||
} | |||
</filebox> | |||
<filebox fn='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> | |||
) | |||
} | |||
</filebox> | |||
= Installation = | = Installation = | ||
Version du 26 octobre 2024 à 22:47
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>
<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 |
