Client-side routing in React Router
In deze les zullen we een belangrijk onderdeel van single-page (SPA) applicaties bekijken - client-side routing. Een dergelijke routing stelt ons in staat om de URL in de browser bij te werken zonder extra verzoeken om het document van de server.
Start de applicatie die we in de
vorige les hebben gemaakt. Open het ontwikkelpaneel en
daarin het tabblad 'Netwerk' (Network voor Chrome).
Na elke klik op onze links
zien we elke keer een verzoek voor document. Dat betekent
dat we elke keer de server vragen ons het
document te laden.
Laten we nu de voordelen van
React Router benutten om dergelijke
verzoeken te elimineren. Open hiervoor root.jsx
van onze applicatie en vervang de a
tag door de Link
component. Laten we
eerst de import toevoegen:
import { Outlet, Link } from 'react-router-dom';
Vervang nu de a tags met het attribuut
href. In plaats van het stukje code:
<a href={`/products/1`}>Product1</a>
<a href={`/products/2`}>Product2</a>
Zullen we nu de volgende code hebben:
<Link to={`/products/1`}>Product1</Link>
<Link to={`/products/2`}>Product2</Link>
Open opnieuw het tabblad 'Netwerk' in
het ontwikkelpaneel, stel in de adresbalk
het rootpad in en vernieuw de
pagina. Klik nu op de links
en je ziet dat het document slechts één keer werd opgevraagd
tijdens de initiële laden
en bij daaropvolgende klikken zijn er geen verzoeken meer naar
de server.
Neem de applicatie die je hebt gemaakt in de opdrachten bij de vorige lessen. Gebruikmakend van de lesmaterialen, implementeer daarin client-side routing, door je links aan te passen, zoals beschreven in de les.
