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:

routes/root.jsximport { Outlet, Link } from 'react-router-dom';

Most cseréljük le a a tag-eket a href attribútummal. A kódrészlet helyett:

routes/root.jsx<a href={`/products/1`}>Product1</a>
<a href={`/products/2`}>Product2</a>

Most a következő kódunk lesz:

routes/root.jsx<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é.