För alla React-applikationer av någon betydande storlek, krävs det en uppdelning i flera separata vyer. Detta medför ett behov av att implementera routing med React.
För en nybörjare kan detta ämne inledningsvis te sig komplicerat. Men den här guiden kommer att hjälpa dig att förstå de grundläggande principerna och få dig att börja arbeta. Vi kommer att skapa en applikation som använder routing för att illustrera detta.
Vad är React Routing (Klient-sidans Routing)
React routing är en form av klient-sidans routing som används i React-applikationer. Det utgör ett alternativ till server-sidans routing. Vid server-sidans routing skickar webbläsaren en GET-begäran till webbservern varje gång användaren navigerar till en ny sida. Denna process kan ta ett par sekunder att slutföra.
För en webbapplikation där användaren snabbt hoppar mellan sidor, kan dessa fördröjningar ge en dålig användarupplevelse. Klient-sidans routing erbjuder ett alternativ. Istället för att webbläsaren hämtar HTML-innehåll, använder applikationen JavaScript för att generera HTML för olika sidor.
Allt som krävs är en index.html-fil som startpunkt för att applikationen ska fungera. Denna startpunkt laddar sedan JavaScript-koden. JavaScript-koden renderar sedan sidorna genom att direkt manipulera DOM-elementen, hanterar navigering och implementerar applikationens funktioner.
Eftersom servern endast renderar index.html-filen, kallas denna typ av applikation en ”single-page application” (SPA).
Fördelar med Klient-sidans Routing
- Användarupplevelsen förbättras avsevärt tack vare snabbare navigering och en mer responsiv applikation. Med server-sidans routing orsakar varje sidnavigering en nätverksbegäran som medför en viss latens.
- Det möjliggör skapandet av applikationer som kan användas offline, eftersom all kod som behövs för att köra applikationen kan lagras lokalt i webbläsarens cache. Detta resulterar i en mer tillgänglig applikation, med fler möjligheter till offline-funktionalitet.
- Applikationen kommer också att använda mindre data, eftersom antalet nätverksanrop minskar avsevärt när all kod hämtas en gång och vissa filer lagras lokalt.
- Serverbelastningen minskar även, eftersom servern endast behöver leverera applikationen en enda gång. Detta kan jämföras med server-sidans rendering, där servern ständigt behöver återskapa applikationen.
Låt oss nu gå igenom hur man implementerar routing i React.
Hur man Implementerar React Routing
I denna handledning ska vi konstruera en enkel applikation för att hantera anteckningar. Den kommer att innehålla ett flertal sidor. Vi kommer att använda React Router DOM för att implementera klient-sidans routing, vilket gör det möjligt för användaren att navigera mellan sidorna. Vi kommer inte att bygga allt som krävs för att applikationen ska fungera fullständigt, utan fokusera huvudsakligen på routing.
Förutsättningar
För att följa denna guide behöver du ha en grundläggande förståelse för HTML, JavaScript och React. Du behöver också Node.js och NPM installerat på din dator. Dessa kan installeras samtidigt genom att ladda ner Node.js från den officiella webbplatsen. Alternativt kan du följa guiden i den inbäddade YouTube-videon.
Vad vi ska bygga
Appen kommer att vara uppdelad i flera vyer. Med hjälp av React Routing kommer vi att kunna navigera till olika avsnitt. Designen för de olika sidorna visas nedan.
Startsidan kommer att visas vid url:en ’/’.
Om-sidan visas vid url:en ’/about’.
Anteckningssidan visas vid url:en ’/notes’.
En sida för att skapa en ny anteckning finns på url:en ’/notes/new’.
Varje anteckning kan visas i sin helhet på en egen sida. Denna sida visas på url:en ’/routes/
Komma Igång
För att börja, skapa ett nytt React-projekt. Vi kommer att använda Vite, så kommandot för att skapa ett nytt projekt ser ut så här:
npm create vite@latest scribbble --template react
Vi har valt ’scribbble’ som projektnamn, och React som mall. Därefter öppnar vi VS Code med hjälp av följande kommandon:
cd scribbble code .
Efter att VS Code har öppnats, går vi tillbaka till terminalen och installerar react-router-dom. Detta paket gör det enklare att implementera routing i dina React-applikationer.
npm install react-router-dom
Vi ska skapa en fil där anteckningarna kommer att lagras. Skapa en src/notes.js fil, och lägg till följande kod:
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;
Ta bort filen src/App.css. Vi kommer inte att använda den i det här projektet. Ta också bort importen för App.css från App.jsx filen.
Ersätt allt innehåll i index.css-filen med följande:
: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}
Skapa sedan följande filer för de sidor vi ska använda:
- src/pages/Home.jsx
- src/pages/About.jsx
- src/pages/Note.jsx
- src/pages/NewNote.jsx
- src/pages/Notes.jsx
Skapa också filen för Navigeringsfält-komponenten. Denna fil ska ligga på src/components/NavBar.jsx
Konfigurera React Routing
Nu när vår applikation är skapad, ska vi konfigurera routingen.
Öppna filen App.jsx och ta bort allt innehåll. Lägg sedan till följande imports längst upp 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 importerar komponenterna BrowserRouter, Routes och Routes från react-router-dom. Dessa kommer att användas för att sätta upp en router. Därefter har vi importerat NavBar från vår komponent-mapp, samt de olika sidorna från sid-mappen. Vi har ännu inte implementerat sidorna, men det kommer vi att göra snart.
Därefter ska vi konfigurera vår app-komponent:
export default App () {
}
Sedan lägger vi till följande struktur i vår return-sats:
return (
<BrowserRouter>
</BrowserRouter>
)
Detta definierar BrowserRouter, en React-komponent som tillhandahålls av react-router-dom. Denna komponent konfigurerar en router som fungerar i webbläsaren. Hela vår applikation kommer att vara omsluten av dessa taggar.
Därefter lägger vi till navigeringsfältet och skapar en Routes-komponent.
return (
<BrowserRouter>
<NavBar />
<div className="container">
<Routes>
</Routes>
</div>
</BrowserRouter>
);
Inom BrowserRouter-elementet har vi lagt till en NavBar. Vi kommer att definiera detta element senare, men det kommer att skapa länkarna som finns högst upp på varje sida. Istället för att skriva koden för navigeringsfältet separat för varje sida, skapar vi en gemensam NavBar-komponent.
Sedan skapade vi ett container-element. Detta element är inte absolut nödvändigt för routing, utan är bara ett extra element för att underlätta stilhantering.
Inom containern har vi lagt till Routes-komponenten. Det är här olika sidor kommer att renderas, beroende på vilken adress som visas i webbläsarens adressfält. Allt som ligger inom Routes-komponenten kommer att uppdateras varje gång url:en ändras.
Slutligen ska vi lägga till de olika sökvägarna för de olika sidorna.
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>
);
Home-komponenten kommer att renderas när adressen är ’/’, och About-komponenten kommer att renderas när adressen är ’/about’. Notes-komponenten kommer att renderas vid ’/notes’-adressen. Vi har också ’/notes/new’ och ’/notes/:id’ definierade som kapslade rutter.
Kapslade Sökvägar Förklarade
En sökväg kan innehålla inre sökvägar. Dessa kallas för kapslade sökvägar. Sökvägen för dessa kapslade sökvägar kombineras med den överordnade sökvägen för att bilda den fullständiga adressen. Till exempel kommer ’/notes’ och ’/new’ att kombineras för att bilda ’/notes/new’.
När användaren navigerar till en överordnad sökväg, kommer endast den överordnade komponenten att renderas. Men när användaren navigerar till en kapslad sökväg, kommer både den överordnade komponenten och den kapslade komponenten att renderas.
För att båda komponenterna ska renderas samtidigt, behöver Notes-komponenten rendera en Outlet-komponent, som anger var de kapslade komponenterna ska bäddas in. Du kommer att se detta senare när vi börjar skapa sidorna.
Dynamiska Sökvägar
Hittills har vi specificerat exakta url:er som vi vill matcha, till exempel ’/’ och ’/om’. React-router-dom tillåter oss dock att specificera dynamiska url:er. En dynamisk url innehåller en del som kan matcha en parameter i adressfältet. När den matchas, skickas parametern vidare till sidan.
Till exempel, inom den överordnade sökvägen ’inlägg’, har vi en kapslad sökväg som innehåller en dynamisk del specificerad som ’:id’. Denna sökväg accepterar vilken text som helst i stället för ’:id’, och den texten blir tillgänglig för Note-komponenten som ’id’ variabeln.
Skapa Navigeringsfältet
Vi ska använda Link-komponenter i stället för vanliga a-taggar när vi navigerar med hjälp av react-router-dom. Därför bör navigeringsfältet se ut så här:
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>
);
}
Lägg till denna kod i filen src/pages/NavBar.jsx.
Utveckla Sidorna
Nu ska vi skapa våra sidor. För startsidan lägger du till följande kod i filen 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å startsidan vill vi använda knappar för att navigera. Därför använder vi `useNavigate`-kroken för att navigera programmatiskt. Vi har importerat kroken och sedan använt den inuti `Home`-komponenten. Returvärdet efter att vi anropat kroken, är en funktion som kan användas för att navigera.
Därefter ska vi definiera om-sidan. Lägg till följande kod 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>
);
}
Efter detta ska vi definiera anteckningssidan.
I den här komponenten behöver vi också inkludera en Outlet-komponent, som kommer att användas för att rendera eventuella kapslade rutter. Därför kommer src/pages/Notes.jsx-sidan se ut så här.
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>
);
}
Därefter ska vi definiera enskilda anteckningssidor.
Denna sida ska renderas för en enskild anteckning. För att avgöra vilken anteckning som ska renderas, hämtar Notes det id som har specificerats i den dynamiska delen av adressen. För att göra detta använder vi `useParams`-kroken. Därför ska koden i din src/pages/Note.jsx-fil se ut så här:
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>
);
}
Slutligen ska vi skapa `NewNote`-komponenten i filen `src/pages/NewNote.jsx` med följande kod:
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>
);
}
Nu har vi skrivit all kod för applikationen. Du kan köra applikationen med kommandot `npm run dev`. Navigera mellan de olika sidorna och se hur snabb klient-sidans routing är.
Nackdelar med Klient-sidans Routing
Trots många fördelar har klient-sidans routing också en del nackdelar. Dessa förklaras nedan:
- Den initiala sidladdningen kan vara långsam eftersom hela applikationen behöver laddas. JavaScript-paketet kan bli mycket stort, vilket resulterar i långa laddningstider.
- Eftersom JavaScript genererar all HTML-kod, kommer sidan inte att vara optimalt optimerad för sökmotorer (SEO).
- Eftersom allt är beroende av JavaScript, kommer webbläsare som inte stöder JavaScript eller där JavaScript har inaktiverats, inte kunna köra applikationen.
Slutsats
I den här artikeln har vi tittat på React Routing genom att skapa ett mindre projekt. Även om vi inte har gått igenom alla möjliga scenarion, täcker denna handledning de grundläggande koncept som kommer att vara relevanta i de flesta projekt du kommer att arbeta med. För mer information om react-router-dom, se den officiella dokumentationen.
Läs sedan denna artikel om React bibliotek för formulärhantering.