En sidebar navigationsmenu består typisk af en lodret liste over links. Du kan oprette et sæt links i React ved hjælp af react-router-dom.
Følg disse trin for at oprette en React-sidenavigationsmenu med links, der indeholder materiale-UI-ikoner. Linkene vil gengive forskellige sider, når du klikker på dem.
Oprettelse af en React-applikation
Hvis du allerede har en Reager projekt, gå gerne videre til næste trin.
Du kan bruge kommandoen create-react-app til at komme hurtigt i gang med React. Den installerer alle afhængigheder og konfigurationer for dig.
Kør følgende kommando for at oprette et React-projekt kaldet react-sidenav.
npx skab-react-app react-sidenav
Dette vil oprette en react-sidenav-mappe med nogle filer for at komme i gang. For at rydde lidt op i denne mappe skal du navigere til src-mappen og erstatte indholdet af App.js med dette:
importere './App.css';fungereApp() {
Vend tilbage (
<div klassenavn="App"></div>
);
}
eksportStandard App;
Oprettelse af navigationskomponenten
Navigationskomponenten, du vil oprette, vil se sådan ud:
Det er ret simpelt, men når du er færdig, bør du være i stand til at ændre det, så det passer til dine behov. Du kan skjule navigationskomponenten ved at bruge dobbeltpilikonet øverst:
Start med at oprette den ikke-sammenklappede visning. Udover pileikonet indeholder sidebjælken en liste over elementer. Hver af disse elementer har et ikon og noget tekst. I stedet for gentagne gange at oprette et element for hvert element, kan du gemme dataene for hvert element i et array og derefter iterere over det ved hjælp af en kortfunktion.
For at demonstrere skal du oprette en ny mappe kaldet lib og tilføje en ny fil kaldet navData.js.
importere HomeIcon fra '@mui/icons-material/Home';
importere TravelExploreIcon fra '@mui/icons-material/TravelExplore';
importere BarChartIcon fra '@mui/icons-material/BarChart';
importere Indstillinger-ikon fra '@mui/icons-material/Indstillinger';
eksportkonst navData = [
{
id: 0,
ikon: <HomeIcon/>,
tekst: "Hjem",
link: "/"
},
{
id: 1,
ikon: <TravelExploreIcon/>,
tekst: "Udforske",
link: "udforske"
},
{
id: 2,
ikon: <BarChartIcon/>,
tekst: "Statistikker",
link: "Statistikker"
},
{
id: 3,
ikon: <Indstillinger Ikon/>,
tekst: "Indstillinger",
link: "indstillinger"
}
]
Ikonerne ovenfor er fra Material UI-biblioteket, så installer det først ved hjælp af denne kommando:
npm installere @mui/material @emotion/react @emotion/styled
npm installere @mui/icons-material
Opret derefter en mappe kaldet Komponenter og tilføje en ny komponent kaldet Sidenav.js.
I denne fil skal du importere navData fra ../lib og oprette skelettet til Sidenav fungere:
// I Sidenav.js
importere { navData } fra "../lib/navData";
eksportStandardfungereSidenav() {
Vend tilbage (
<div>
</div>
)
}
For at oprette linkene skal du ændre div-elementet i denne komponent til dette:
<div>
<knap klassenavn={styles.menuBtn}>
<KeyboardDouble ArrowLeftIcon />
</button>
{navData.map (element =>{
Vend tilbage <div key={item.id} className={styles.sideitem}>
{item.icon}
<span className={styles.linkText}>{item.text}</span>
</div>
})}
</div>Denne komponent opretter et navigationslink, der indeholder ikonet og linkteksten for hver iteration i kortfunktionen.
Knapelementet holder venstre pilikon fra Material UI-biblioteket. Importer det øverst i komponenten ved hjælp af denne kode.
importere KeyboardDouble ArrowLeftIcon fra '@mui/icons-material/KeyboardDoubleArrowLeft';
Du har måske også bemærket, at klassenavnene refererer til et stilobjekt. Dette er fordi denne tutorial bruger CSS-moduler. CSS-moduler giver dig mulighed for at oprette stilarter med lokalt omfang i React. Du behøver ikke at installere eller konfigurere noget, hvis du brugte create-react-app til at starte dette projekt.
I mappen Komponenter skal du oprette en ny fil kaldet sidenav.module.css og tilføje følgende:
.sidenav {
bredde: 250px;
overgang: bredde 0.3slet ind-ud;
højde: 100vh;
baggrundsfarve: rgb (10,25,41);
polstring-top: 28px;
}.sidenavLukket {
komponerer: sidenav;
overgang: bredde 0.3slet ind-ud;
bredde: 60px
}.sideitem {
display: flex;
align-items: center;
polstring: 10px 20px;
markør: pointer;
farve: #B2BAC2;
tekst-dekoration: ingen;
}.linkText {
polstring-venstre: 16px;
}.linkTextClosed {
komponerer: linkText;
synlighed: skjult;
}.sideitem:hover {
baggrundsfarve: #244f7d1c;
}
.menuBtn {
justere-selv: center;
justere-selv: bøje-Start;
retfærdiggøre-selv: bøje-ende;
farve: #B2BAC2;
baggrundsfarve: gennemsigtig;
grænse: ingen;
markør: pointer;
polstring-venstre: 20px;
}
Opsætning af React Router
De div-elementer, der returneres af kortfunktionen, skal være links. I React kan du oprette links og ruter ved hjælp af react-router-dom.
Installer react-router-dom via npm i terminalen.
npm installer react-router-dom@seneste
Denne kommando installerer den seneste version af react-router-dom.
I Index.js skal du indpakke app-komponenten med routeren.
importere Reagere fra 'reagere';
importere ReactDOM fra 'reager-dom/klient';
importere App fra './App';
importere { BrowserRouter } fra 'reager-router-dom';
konst root = ReactDOM.createRoot(dokument.getElementById('root'));
rod.render(
<Reagere. StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
);
Tilføj derefter dine ruter i App.js.
importere {
BrowserRouter,
ruter,
Rute,
} fra "reagere-router-dom";importere './App.css';
importere Sidenav fra './Components/Sidenav';
importere Udforske fra "./Pages/Explore";
importere Hjem fra "./Sider/Hjem";
importere Indstillinger fra "./Sider/Indstillinger";
importere Statistikker fra "./Sider/Statistik";
fungereApp() {
Vend tilbage (
<div klassenavn="App">
<Sidenav/>
<vigtigste>
<Ruter>
<Rutesti="/" element={<Hjem />}/>
<Rutesti="/explore" element={<Udforsk />} />
<Rutesti="/statistics" element={<Statistikker />}/>
<Rutesti="/settings" element={<Indstillinger />} />
</Routes>
</main>
</div>
);
}
eksportStandard App;
Rediger App.css med disse stilarter.
krop {
margin: 0;
polstring: 0;
}.App {
display: flex;
}
hoved {
polstring: 10px;
}
Hver rute returnerer en anden side afhængigt af den URL, der sendes til sti rekvisitter. Opret en ny mappe kaldet Sider, og tilføj fire komponenter - siden Hjem, Udforsk, Statistik og Indstillinger. Her er et eksempel:
eksportStandardfungereHjem() {
Vend tilbage (
<div>Hjem</div>
)
}
Hvis du besøger /home-stien, skal du se "Hjem".
Linkene i sidebjælken skal føre til den matchende side, når du klikker på dem. I Sidenav.js skal du ændre kortfunktionen til at bruge NavLink-komponenten fra react-router-dom i stedet for div-elementet.
{navData.map (element => {
Vend tilbage <NavLink key={item.id} className={styles.sideitem} til={item.link}>
{item.icon}
<span className={styles.linkText}>{item.text}</span>
</NavLink>
})}
Husk at importere NavLink øverst i filen.
importere { NavLink } fra "reager-router-dom";
NavLink modtager URL-stien til linket gennem til prop.
Indtil dette tidspunkt er navigationslinjen åben. For at gøre den sammenklappelig kan du skifte dens bredde ved at ændre CSS-klassen, når en bruger klikker på pileknappen. Du kan derefter ændre CSS-klassen igen for at åbne den.
For at opnå denne skiftefunktion skal du vide, hvornår sidebjælken er åben og lukket.
Til dette skal du bruge useState-krogen. Dette Reaktionskrog giver dig mulighed for at tilføje og spore tilstanden i en funktionel komponent.
I sideNav.js skal du oprette krogen til den åbne tilstand.
konst [åben, sætåben] = brugstilstand(rigtigt)
Initialiser åben tilstand til sand, så sidebjælken altid vil være åben, når du starter programmet.
Opret derefter funktionen, der skifter denne tilstand.
konst toggleOpen = () => {
sætåben(!åben)
}
Du kan nu bruge den åbne værdi til at oprette dynamiske CSS-klasser som denne:
<div klassenavn={åben? styles.sidenav: styles.sidenavClosed}>
<button className={styles.menuBtn} onClick={toggleOpen}>
{åben? <KeyboardDouble ArrowLeftIcon />: <KeyboardDouble ArrowRightIcon />}
</button>
{navData.map (element =>{
Vend tilbage <NavLink key={item.id} className={styles.sideitem} til={item.link}>
{item.icon}
<span className={åben? styles.linkText: styles.linkTextClosed}>{item.text}</span>
</NavLink>
})}
</div>
De anvendte CSS-klassenavne vil blive bestemt af den åbne tilstand. For eksempel, hvis open er sand, vil det ydre div-element have et sidenav-klassenavn. Ellers vil klassen være sidenavLukket.
Dette er det samme for ikonet, som skifter til højre pil-ikon, når du lukker sidebjælken.
Husk at importere den.
importere KeyboardDouble ArrowRightIcon fra '@mui/icons-material/KeyboardDoubleArrowRight';
Sidebjælkekomponenten er nu sammenklappelig.
Få fat i den komplette kode fra denne GitHub-depot og prøv det selv.
Styling af React-komponenter
React gør det nemt at bygge en sammenklappelig navigationskomponent. Du kan bruge nogle af de værktøjer, som React leverer som react-router-dom til at håndtere routing og kroge til at holde styr på den kollapsede tilstand.
Du kan også bruge CSS-moduler til at style komponenter, selvom du ikke behøver det. Brug dem til at oprette klasser med lokalt omfang, der er unikke, og som du kan ryste fra bundlefilerne, hvis de ikke er i brug.