« 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> »)
 
 
(5 versions intermédiaires par le même utilisateur non affichées)
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>
      {/* 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>
  )
}
</filebox>
<filebox fn='src/SideMenu.tsx' collapsed>
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>
        </>
    )
}
</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>


= Installation =
= Installation =

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 »