Klient-side rutering i React Router

I denne leksjonen skal vi se på en viktig komponent i single-page (SPA) applikasjoner - klient-side rutering. Slik rutering lar oss oppdatere URL i nettleseren uten ytterligere forespørsler om dokument fra serveren.

Start applikasjonen som vi opprettet i forrige leksjon. Åpne utviklerpanelet og fanen 'Nettverk' (Network for Chrome). Etter hvert klikk på våre lenker ser vi hver gang en forespørsel for document. Det betyr at vi hver gang ber serveren om å laste inn document for oss.

La oss nå bruke fordelene med React Router for å bli kvitt slike forespørsler. For å gjøre dette åpner vi root.jsx i applikasjonen vår og erstatter a taggen i oppsettet med Link komponenten. Til å begynne med legger vi til importen:

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

Erstatt nå a taggene med attributtet href. I stedet for kodesnutten:

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

Vil vi nå ha følgende kode:

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

Åpne fanen 'Nettverk' i utviklerpanelet på nytt, sett rotstien i adresselinjen og oppdater siden. Nå klikker vi på lenkene og ser at document ble forespurt bare en gang under innledende lasting og ved påfølgende klikk er det ingen forespørsel til serveren lenger.

Ta applikasjonen du opprettet i oppgavene til tidligere leksjoner. Bruk materialet fra leksjonen og implementer klient-side rutering i den, ved å endre lenkene dine som beskrevet i leksjonen.