Směrování na straně klienta v React Router

V této lekci se podíváme na důležitou součást jednostránkových (SPA) aplikací - směrování na straně klienta. Takové směrování nám umožňuje aktualizovat URL v prohlížeči bez dodatečných požadavků na dokument ze serveru.

Spusťte aplikaci, kterou jsme vytvářeli v předchozí lekci. Otevřete panel vývojáře a v něm kartu 'Síť' (Network pro Chrome). Po každém kliknutí na naše odkazy vidíme pokaždé požadavek na document. To znamená, že pokaždé žádáme server, aby nám načetl document.

Pojďme nyní využít výhod React Router, abychom se podobným požadavkům vyhnuli. K tomu otevřeme root.jsx naší aplikace a nahradíme tag a rozložení komponentou Link. Pro začátek přidejme jeho import:

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

Nyní nahradíme tagy a s atributem href. Místo kousku kódu:

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

Nyní budeme mít následující kód:

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

Znovu otevřete kartu 'Síť' na panelu vývojáře, v adresním řádku nastavte kořenovou cestu a obnovte stránku. Nyní klikněte na odkazy a uvidíte, že document byl požadován pouze jednou při počátečním načtení a při následných kliknutí již není žádný požadavek na server.

Vezměte aplikaci, kterou jste vytvořili v úkolech k předchozím lekcím. Využijte materiály lekce a implementujte v ní směrování na straně klienta, předěláním vašich odkazů, jak je popsáno v lekci.