« React router » : différence entre les versions

De Banane Atomic
Aller à la navigationAller à la recherche
Aucun résumé des modifications
 
(4 versions intermédiaires par le même utilisateur non affichées)
Ligne 15 : Ligne 15 :
   return (
   return (
     <BrowserRouter>
     <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 />
       <SideMenu />


Ligne 26 : Ligne 34 :
</filebox>
</filebox>


<filebox fn='src/SideMenu.tsx'>
<filebox fn='src/SideMenu.tsx' collapsed>
import { Drawer, List, ListItem, ListItemButton, ListItemIcon, ListItemText, Toolbar, Typography, Divider } from '@mui/material';
import { useState } from 'react';
import { Link } from 'react-router-dom'


import { Link } from 'react-router-dom'
import { Drawer, ToggleButton, ToggleButtonGroup, Toolbar, Typography, IconButton } from '@mui/material';


import ChecklistIcon from '@mui/icons-material/Checklist';
import ChecklistIcon from '@mui/icons-material/Checklist';
import InfoIcon from '@mui/icons-material/Info';
import InfoIcon from '@mui/icons-material/Info';
import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
import MenuIcon from '@mui/icons-material/Menu';


const drawerWidth = 240;
import './SideMenu.css';


export default function SideMenu() {
export default function SideMenu() {
  return (
    const [open, setOpen] = useState(true);
     <Drawer
     const [selectedButton, setSelectedButton] = useState('home');
      sx={{
 
         width: drawerWidth,
    const toggleDrawer = (x: boolean) => () => {
        flexShrink: 0,
         setOpen(x);
         '& .MuiDrawer-paper': {
    };
          width: drawerWidth,
 
          boxSizing: 'border-box',
    const handleSelection = (event: React.MouseEvent<HTMLElement>, newSelection: string) => {
         },
         if (newSelection !== null) {
      }}
            setSelectedButton(newSelection);
      variant="permanent"
         }
      anchor="left"
    };
      className='sideMenu'
 
    >
    return (
      <Toolbar>
        <>
        <Typography variant="h6">Items</Typography>
            <IconButton id='hideMenuButton' onClick={toggleDrawer(true)}>
      </Toolbar>
                <MenuIcon />
      <Divider />
            </IconButton>
      <List>
 
        <ListItem disablePadding component={Link} to="/">
            <Drawer variant="persistent" open={open}>
          <ListItemButton>
                <Toolbar id='menuHeader'>
            <ListItemIcon>
                    <Typography variant="h6" color='info'>Items</Typography>
              <ChecklistIcon />
                    <IconButton onClick={toggleDrawer(false)}>
            </ListItemIcon>
                        <ChevronLeftIcon />
            <ListItemText primary="Items" />
                    </IconButton>
          </ListItemButton>
                </Toolbar>
        </ListItem>
 
        <ListItem disablePadding component={Link} to="/about">
                <ToggleButtonGroup
          <ListItemButton>
                    orientation="vertical"
            <ListItemIcon>
                    value={selectedButton}
              <InfoIcon />
                    exclusive
            </ListItemIcon>
                    onChange={handleSelection}
            <ListItemText primary="About" />
                    aria-label="navigation menu"
          </ListItemButton>
                >
         </ListItem>
                    <ToggleButton
      </List>
                        value="home"
    </Drawer>
                        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>
         </>
    )
}
</filebox>
 
<filebox fn='src/SideMenu.css' collapsed>
.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;
}
}
</filebox>
</filebox>

Dernière version du 27 octobre 2024 à 15:53

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

Bash.svg 
npm i react-router-dom
Récupérée de « http://wiki.bananeatomic.fr/index.php?title=React_router&oldid=31273 »