Kliens oldali útválasztás a React Routerban
Ezen a leckében egy fontos összetevőjét vizsgáljuk meg az egylapos (SPA) alkalmazásoknak - a kliens oldali útválasztást. Ez az útválasztás lehetővé teszi számunkra, hogy frissítsük a böngészőben az URL-t anélkül, hogy további kéréseket kellene intéznünk a szerverhez a dokumentumért.
Indítsa el azt az alkalmazást, amelyet az
előző leckén hoztunk létre. Nyissa meg a fejlesztői eszköztárat és
benne a 'Hálózat' (Network a Chrome-hoz) fület.
Minden kattintásunk után a linkjeinkre
látjuk, hogy minden alkalommal kérés történik a dokumentumért. Azaz
minden alkalommal megkérjük a szervert, hogy
töltse be számunkra a dokumentumot.
Most pedig használjuk ki a React Router
előnyeit, hogy megszabaduljunk az ilyen
kérésektől. Ehhez nyissuk meg a root.jsx
alkalmazásunkat és cseréljük le a a
taget a Link komponensre. Kezdetként
adjuk hozzá az importját:
import { Outlet, Link } from 'react-router-dom';
Most cseréljük le a a tag-eket a
href attribútummal. A kódrészlet helyett:
<a href={`/products/1`}>Product1</a>
<a href={`/products/2`}>Product2</a>
Most a következő kódunk lesz:
<Link to={`/products/1`}>Product1</Link>
<Link to={`/products/2`}>Product2</Link>
Ismét nyissa meg a 'Hálózat' fület a
fejlesztői eszköztáron, állítsa be a címsorban
a gyökérútvonalat és frissítse az
oldalt. Most kattintson a linkekre
és láthatja, hogy a dokumentumot csak
egyszer kértük le a kezdeti betöltéskor,
és a további kattintásokkor már nincsenek
kéresek a szerver felé.
Vegye azt az alkalmazást, amelyet az előző leckék feladataihoz hozott létre. A lecke anyagát felhasználva valósítsa meg benne a kliens oldali útválasztást, átalakítva a linkjeit a leckében leírtak szerint.
