Klient-side routing i React Router

I denne lektion vil vi se på en vigtig komponent i single-page (SPA) applikationer - klient-side routing. Denne routing giver os mulighed for at opdatere URL'en i browseren uden yderligere anmodninger om dokumentet fra serveren.

Start den applikation, som vi oprettede i forrige lektion. Åbn udviklerpanelet og fanen 'Netværk' (Network for Chrome). Efter hvert klik på vores links ser vi hver gang en anmodning om document. Det betyder at vi hver gang beder serveren om at indlæse document for os.

Lad os nu drage fordel af fordelene ved React Router for at undgå sådanne anmodninger. For at gøre dette åbner vi root.jsx i vores applikation og erstatter a tagget med Link komponenten. Til at starte med tilføjer vi importen:

import { Outlet, Link } from 'react-router-dom';

Nu erstatter vi a tagsene med attributten href. I stedet for kode stykket:

<a href={`/products/1`}>Product1</a>
<a href={`/products/2`}>Product2</a>

Vil vi nu have følgende kode:

<Link to={`/products/1`}>Product1</Link>
<Link to={`/products/2`}>Product2</Link>

Åbn fanen 'Netværk' i udviklerpanelet igen, indstil stien til roden i adresselinjen og opdater siden. Nu klikker vi på linksene og ser, at document kun blev anmodet om én gang under den indledende indlæsning og at der ved efterfølgende klik ikke er nogen anmodning til serveren.

Tag den applikation, du oprettede i opgaverne til de foregående lektioner. Brug materialet fra lektionen, implementer klient-side routing i den ved at omdanne dine links, som beskrevet i lektionen.