«`html
For enhver React-applikasjon av en viss kompleksitet, er det nødvendig å organisere innholdet på flere undersider. Dette krever implementering av navigasjon, ofte kalt ruting, som lar brukere bytte mellom disse sidene.
I starten kan dette virke som en overveldende oppgave, men denne veiledningen vil introdusere deg for de nødvendige grunnleggende prinsippene. Vi skal lage en applikasjon som bruker ruting for å vise hvordan det fungerer i praksis.
Hva er React Routing (Klient-side Ruting)?
React-ruting er en form for klient-side navigasjon brukt i React-applikasjoner. Klient-side ruting er et alternativ til server-side ruting. Ved server-side ruting sender nettleseren en GET-forespørsel til webserveren hver gang brukeren navigerer til en annen side. Denne prosessen kan medføre en merkbar forsinkelse før siden lastes.
For webapplikasjoner hvor brukere raskt beveger seg mellom flere sider, kan denne forsinkelsen redusere brukeropplevelsen. Klient-side ruting tilbyr en løsning. I stedet for å motta HTML fra serveren, bruker applikasjonen JavaScript til å generere HTML for de ulike sidene.
Applikasjonen trenger kun en enkelt index.html-fil som startpunkt. Denne filen laster deretter JavaScript-koden. JavaScript-koden vil generere sidene ved å manipulere DOM, håndtere navigasjonen, og sørge for appens funksjonalitet.
Fordi serveren kun sender index.html, blir dette ansett som en single-page applikasjon (SPA).
Fordeler med Klient-side Ruting
- Brukerne opplever bedre brukeropplevelse takket være raskere navigasjon, noe som gir en mer responsiv applikasjon. Med server-side ruting innebærer hver navigering en ny nettverksforespørsel med potensielle forsinkelser.
- Muliggjør utvikling av offline-applikasjoner, ettersom all nødvendig kode kan lagres lokalt. Dette gir mulighet for å utvikle mer tilgjengelige applikasjoner med offline-funksjonalitet.
- Applikasjonen bruker mindre data, siden antall nettverksforespørsler reduseres betraktelig, spesielt hvis ressurser lastes inn en gang og lagres lokalt.
- Reduserer serverbelastningen, siden serveren bare trenger å levere applikasjonen en gang. Dette er forskjellig fra server-side gjengivelse, hvor serveren kontinuerlig gjengir applikasjonen.
La oss nå utforske hvordan du implementerer ruting i React.
Hvordan Implementere React Routing
I denne veiledningen skal vi lage en enkel notatapplikasjon. Appen vil bestå av flere undersider. Vi vil bruke React Router DOM for å implementere klient-side ruting, slik at brukerne kan bevege seg mellom de ulike sidene. Vi skal ikke bygge hele applikasjonen funksjonell, men fokusere på selve rutingen.
Forutsetninger
For å kunne følge denne veiledningen, er det viktig at du har grunnleggende forståelse for HTML, JavaScript og React. Node.js og NPM må også være installert. Du kan laste dem ned fra den offisielle nettsiden. Alternativt, kan du se den inkluderte videoen for en veiledning.
Hva Vi Skal Lage
Applikasjonen vil inneholde flere undersider. Ved hjelp av React Router vil brukerne kunne navigere mellom disse sidene. Designene for sidene er illustrert nedenfor.
Hjem-siden vises med ruten «/».
Om-siden vises med ruten «/about».
Notater-siden vises med ruten «/notes».
Nytt notat-siden vises med ruten «/notes/new».
Hvert notat kan sees i sin helhet på en egen side. Denne siden vises ved ruten «/notes/
Komme i Gang
For å begynne, lag et nytt React-prosjekt. Vi bruker Vite for dette, så kommandoen for å initiere et nytt prosjekt er:
npm create vite@latest scribbble --template react
Vi bruker «scribbble» som prosjektnavn og React som mal. Åpne prosjektet i VS Code med følgende kommandoer:
cd scribbble code .
Når VS Code er åpen, installer react-router-dom i terminalen. Dette biblioteket forenkler implementeringen av ruting i React-applikasjoner.
npm install react-router-dom
Vi trenger en fil for notatene. Lag en src/notes.js-fil og legg til følgende kode:
const notes = [
{
id: 1,
title: "Note 1",
body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
},
{
id: 2,
title: "Note 2",
body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
},
{
id: 3,
title: "Note 3",
body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
},
];
export default notes;
Slett filen src/App.css. Vi bruker den ikke i dette prosjektet. Husk også å fjerne importen av App.css fra App.jsx.
Erstatt alt i index.css med dette:
:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;font-weight:400;color:#404040}*{margin:0;padding:0}.nav-container{display:flex;justify-content:space-between;padding:15px 30px}.home-buttons,.nav{display:flex;gap:10px}a{text-decoration:none;color:inherit;font-weight:600}h1{font-size:63px;margin:20px 0}input,textarea{border:1px solid #f1f1f1;background-color:#fafafa;outline:0;padding:10px;width:100%}textarea{resize:none;font-family:inherit}.container{padding:15px}.primary{background-color:#8a2be2;color:#fff}.secondary{background-color:#eee}.button{padding:15px 30px;font-size:16px;border:none;font-weight:700;border-radius:7px;cursor:pointer}.home-container{height:300px;display:flex;flex-direction:column;align-items:center;justify-content:center}.new-note-container{padding:20px}.new-note-form{display:flex;flex-direction:column;align-items:center;width:500px;gap:20px;margin:auto;border-radius:7px;padding:20px 30px}.notes-list{display:grid;grid-template-columns:1fr 1fr 1fr;gap:30px;padding:0 60px}.note{border:1px solid #d3d3d3;padding:15px;border-radius:7px}.note h2{font-size:1rem;margin-bottom:10px}.note p{color:#585858;font-size:.9rem;cursor:pointer}.note-container{display:flex;align-items:center;justify-content:center;padding:50px}.note-content{width:500px}
Opprett deretter følgende filer for de ulike sidene:
- src/pages/Home.jsx
- src/pages/About.jsx
- src/pages/Note.jsx
- src/pages/NewNote.jsx
- src/pages/Notes.jsx
Lag også filen for navigasjonslinjen, som skal ligge i src/components/NavBar.jsx.
Sette Opp React Routing
Når alt er satt opp, kan vi begynne å konfigurere rutingen i applikasjonen.
Åpne App.jsx-filen og slett innholdet. Legg deretter til følgende importer øverst i filen:
import { BrowserRouter, Routes, Route } from "react-router-dom";
import { NavBar } from "./components/NavBar";
import { Home } from "./pages/Home";
import { About } from "./pages/About";
import { Notes } from "./pages/Notes";
import { Note } from "./pages/Note";
import { NewNote } from "./pages/NewNote";
Vi importerer komponentene BrowserRouter, Routes og Route fra react-router-dom, som brukes til å konfigurere en ruter. I tillegg importerer vi NavBar fra komponentmappen, samt de forskjellige sidene fra sidemappen. Sidene er ikke implementert ennå, men det vil vi gjøre snart.
Deretter definerer vi app-komponenten:
export default App () {
}
Legg til følgende kode i return-statementet:
return (
<BrowserRouter>
</BrowserRouter>
)
Dette gjengir BrowserRouter, en React-komponent fra react-router-dom, som konfigurerer en ruter som virker i nettleseren. Resten av applikasjonen vil ligge inne i disse taggene.
Nå legger vi til navigasjonslinjen og lager en ruter-komponent:
return (
<BrowserRouter>
<NavBar />
<div className="container">
<Routes>
</Routes>
</div>
</BrowserRouter>
);
Inne i BrowserRouter-elementet har vi lagt til en NavBar. Denne vil bli definert senere, men den vil inneholde lenkene øverst på hver side. I stedet for å skrive en separat lenkeliste for hver side, lager vi en felles NavBar.
Vi har også lagt til et beholder-element. Dette er ikke nødvendig for rutingen, men det brukes for å legge til styling.
Inne i beholderen har vi lagt til ruter-komponenten. Det er her de ulike sidene vil gjengis avhengig av hvilken rute nettleseren befinner seg på. Alt innhold inne i ruter-komponenten vil gjengis hver gang ruten endres.
Til slutt, legger vi til rutene for de forskjellige sidene.
return (
<BrowserRouter>
<NavBar />
<div className="container">
<Routes>
<Route path="/" Component={Home} />
<Route path="about" Component={About} />
<Route path="notes" Component={Notes}>
<Route path="new" Component={NewNote} />
<Route path=":id" Component={Note} />
</Route>
</Routes>
</div>
</BrowserRouter>
);
Hjem-komponenten vil gjengis når stien er «/», mens Om-komponenten vil gjengis ved «/about». Notes-komponenten vil gjengis ved «/notes». I tillegg har vi «/notes/new» og «/notes/:id» definert som nestede ruter.
Nestede Ruter Forklart
En rute kan inneholde egne undersider, som kalles nestede ruter. Stiene til disse nestede rutene vil bli koblet til den overordnede ruten for å danne den fullstendige stien. For eksempel vil rutene «notes» og «new» kombineres til «/notes/new».
Når brukeren navigerer til den overordnede ruten, vil kun den overordnede komponenten bli gjengitt. Men, når brukeren navigerer til en nestet rute, vil både den overordnede og den nestede komponenten bli gjengitt.
For å gjengi begge komponentene sammen, må Notes-komponenten gjengi en Outlet-komponent, som bestemmer hvor den nestede komponenten skal settes inn. Dette vil du se senere når vi bygger sidene.
Dynamiske Ruter
Til nå har vi spesifisert eksakte stier som vi ønsker å matche, slik som «/» og «/about». React-router-dom lar oss også definere dynamiske ruter. En dynamisk rute inneholder en del som kan matches mot en søkeparameter. Når det er et treff, sendes denne søkeparameteren til den tilhørende siden.
For eksempel, inni den overordnede ruten «innlegg», har vi en nestet rute som inneholder en dynamisk del som defineres av :id. Denne ruten aksepterer enhver tekst i stedet for :id, og denne teksten blir tilgjengelig for Note-komponenten som id.
Bygge Navigasjonslinjen
Vi bruker Link-komponenter i stedet for vanlige anker-tagger for å navigere med react-router-dom. Navigasjonslinjen vår bør derfor se slik ut:
import { Link } from "react-router-dom";
export function NavBar() {
return (
<div className="nav-container">
<Link to="/">Scribbble</Link>
<nav className="nav">
<Link to="/about">About</Link>
<Link to="/notes">Notes</Link>
<Link to="/notes/new">New Note</Link>
</nav>
</div>
);
}
Legg denne koden til src/components/NavBar.jsx.
Bygge Sidene
Nå skal vi bygge de forskjellige sidene. For hjemmesiden, legg til følgende kode i src/pages/Home.jsx:
import { useNavigate } from "react-router-dom";
export function Home() {
const navigate = useNavigate();
return (
<div className="home-container">
<h1>Notes for professionals</h1>
<div className="home-buttons">
<button
onClick={() => {
navigate("/notes/new");
}}
className="button primary"
>
Start Scribbling
</button>
<button
onClick={() => {
navigate("/notes");
}}
className="button secondary"
>
View Notes
</button>
</div>
</div>
);
}
På hjemmesiden vil vi bruke knapper til å navigere. Derfor bruker vi useNavigate-hooken til å navigere programmatisk. Vi importerte hooken, og kalte den inne i hjem-komponenten. Returverdien fra kallet er en funksjon som kan brukes til å navigere.
Deretter definerer vi Om-siden. Legg til følgende kode i filen src/pages/About.jsx:
export function About() {
return (
<div>
<h1>About</h1>
<p>Simple Notes is the best note-taking application for professionals</p>
</div>
);
}
Deretter definerer vi notatsiden.
I denne komponenten må vi også inkludere en Outlet-komponent for å gjengi eventuelle nestede ruter. Derfor vil src/pages/Notes.jsx se slik ut:
import { Outlet, useNavigate } from "react-router-dom";
import notes from "../notes";
export function Notes() {
const navigate = useNavigate();
return (
<div>
<Outlet />
<div className="notes-list">
{notes.map((note) => {
return (
<div
className="note"
key={note.id}
onClick={() => {
navigate("/notes/" + note.id);
}}
>
<h2>{note.title}</h2>
<p>{note.body.slice(0, 100)}</p>
</div>
);
})}
</div>
</div>
);
}
Nå definerer vi selve notatsiden.
Denne vil vise et spesifikt notat. For å velge et notat, må vi hente ID-en fra den dynamiske delen av ruten. Vi bruker useParams-hooken for å gjøre dette. Koden i src/pages/Note.jsx bør derfor være:
import { useParams } from "react-router-dom";
import notes from "../notes";
export function Note() {
const params = useParams();
const note = notes.find((note) => note.id == params.id);
return (
<div className="note-container">
<div className="note-content">
<h2>{note.title}</h2>
<p>{note.body}</p>
</div>
</div>
);
}
Til slutt, lager vi NewNote-komponenten i src/pages/NewNote.jsx med følgende kode:
export function NewNote() {
return (
<div class="new-note-container">
<form class="new-note-form">
<h2>New Note</h2>
<input type="text" name="title" placeholder="Note title" />
<textarea rows="10" placeholder="Note text" />
<button class="button primary">Save Note</button>
</form>
</div>
);
}
Nå har vi skrevet all koden for applikasjonen. Du kan starte appen ved å bruke kommandoen «npm run dev». Naviger rundt på de ulike sidene og observer hvor raskt klient-side rutingen virker.
Ulemper med Klient-side Ruting
Selv med mange fordeler, har klient-side ruting noen ulemper. Disse er forklart nedenfor:
- Den første sideinnlastingen kan være treg, da hele applikasjonen må lastes. JavaScript-pakken kan være stor og kreve lang lastetid.
- Siden HTML-koden genereres ved hjelp av JavaScript, er ikke siden optimalisert for SEO (søkemotoroptimalisering).
- Siden alt avhenger av JavaScript, vil ikke nettlesere som ikke støtter JavaScript eller hvor JavaScript er deaktivert, kunne kjøre programmet.
Konklusjon
I denne artikkelen har vi gått gjennom hvordan man bruker React-ruting ved å bygge et lite prosjekt. Selv om vi ikke har dekket alle aspekter av emnet, så inneholder denne veiledningen de mest grunnleggende konseptene som du vil bruke i de fleste prosjekter. For mer detaljert informasjon om react-router-dom, se den offisielle dokumentasjonen.
Etter dette kan du lese denne artikkelen om React-skjemabiblioteker.
«`