Klient-sid routing i React Router

I den här lektionen kommer vi att titta på en viktig komponent i ensidiga (SPA) applikationer - klient-sid routing. Sådan routing tillåter oss att uppdatera URL:en i webbläsaren utan ytterligare förfrågningar om dokument från servern.

Starta applikationen som vi skapade i föregående lektion. Öppna utvecklarpanelen och fliken 'Nätverk' (Network för Chrome). Efter varje klick på våra länkar ser vi en förfrågan för document varje gång. Det betyder att vi varje gång ber servern att ladda ner document för oss.

Låt oss nu använda fördelarna med React Router för att bli av med sådana förfrågningar. För att göra detta öppnar vi root.jsx i vår applikation och ersätter a-taggen i utmärkelsen med komponenten Link. För att börja lägger vi till dess import:

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

Nu ersätter vi a-taggarna med attributet href. Istället för kodavsnittet:

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

Kommer vi nu att ha följande kod:

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

Öppna fliken 'Nätverk' i utvecklarpanelen igen, sätt rotvägen i adressfältet och uppdater sidan. Nu klickar vi på länkarna och ser att document endast efterfrågades en gång vid den initiala laddningen och vid efterföljande klick finns ingen förfrågan till servern längre.

Ta applikationen du skapade i uppgifterna till tidigare lektioner. Använd lektionens material, implementera klient-sid routing i den, genom att ändra dina länkar enligt beskrivningen i lektionen.