Roetering aan die kliëntkant in React Router
In hierdie les sal ons 'n belangrike komponent van enkelblad (SPA) toepassings bespreek - roetering aan die kliëntkant. So 'n roetering laat ons toe om die URL in die blaaier op te dateer sonder bykomende versoeke vir die dokument van die bediener af.
Begin die toepassing wat ons op die
vorige les geskep het. Maak die ontwikkelaarspanel oop en
daarin die oortjie 'Netwerk' (Network vir Chrome).
Na elke klik op ons skakels sien ons
elke keer 'n versoek vir die document. Dit beteken
ons vra die bediener elke keer om die
document vir ons te laai.
Kom ons gebruik nou die voordele van
React Router om sulke versoeke te
verwyder. Om dit te doen, maak ons root.jsx
van ons toepassing oop en vervang die a
-tikker in die opmaak met die Link
komponent. Laat ons eers die invoer daarvan byvoeg:
import { Outlet, Link } from 'react-router-dom';
Vervang nou die a-tikkers met die kenmerk
href. In plaas van die stukkie kode:
<a href={`/products/1`}>Product1</a>
<a href={`/products/2`}>Product2</a>
Sal ons nou die volgende kode hê:
<Link to={`/products/1`}>Product1</Link>
<Link to={`/products/2`}>Product2</Link>
Maak weer die oortjie 'Netwerk' op die
ontwikkelaarspanel oop, stel die wortelpad
in die adresbalk en verfris
die bladsy. Klik nou op die skakels
en sien dat die document net
een keer versoek is tydens die aanvanklike laai
en daar is geen versoek na die
bediener by daaropvolgende klieke nie.
Neem die toepassing wat jy in die take vir vorige lesse geskep het. Gebruik die materiaal van die les, implementeer roetering aan die kliëntkant daarin, deur jou skakels te omskep soos beskryf in die les.
