Lekce 13 · Ekosystém

Routování (React Router)

Stránky, parametry, vnořené layouty, stav v URL, loadery a chráněné cesty.

Než začneme: hotel s recepcí

Single-page aplikace je jedna jediná HTML stránka. Kdyby to tak zůstalo, měla by celá aplikace jednu adresu – a uživatel by nemohl poslat kolegovi odkaz na konkrétní produkt, dát si stránku do záložek ani se vrátit tlačítkem Zpět. Proto potřebujeme, aby každá „obrazovka“ měla vlastní adresu, i když je to pořád jedna stránka.

Představ si aplikaci jako hotel:

URL je číslo pokoje. /produkty/42 = „druhé patro, pokoj 42“. Kdo zná číslo, dostane se přímo tam.
Router je recepce. Podívá se na číslo a pošle tě do správného pokoje – bez toho, abys musel vyjít z hotelu a vejít znovu (bez obnovení stránky).
Layout je chodba. Recepce, výtah a koberec na chodbě jsou pořád stejné; mění se jen pokoj, do kterého vstoupíš. V Reactu je „dveřmi pokoje“ komponenta <Outlet />.
Search params jsou přání k pokoji: ?vyhled=more&postylka=ano. Pořád stejný pokoj, jen jinak nachystaný.

1. Recepce a pokoje: první routy

Malý obchod: domovská stránka, seznam produktů, detail produktu a stránka „nenalezeno“.

import { createBrowserRouter, RouterProvider, Outlet, Link, useParams } from 'react-router'

const router = createBrowserRouter([
  {
    path: '/',
    element: <Layout />,                         // chodba – je vidět vždy
    children: [
      { index: true, element: <Home /> },        // přesně "/"
      { path: 'produkty', element: <ProductList /> },
      { path: 'produkty/:productId', element: <ProductDetail /> },
      { path: '*', element: <NotFound /> },      // cokoli jiného
    ],
  },
])

createRoot(root).render(<RouterProvider router={router} />)

function Layout() {
  return (
    <>
      <nav>
        <Link to="/">Domů</Link>
        <Link to="/produkty">Produkty</Link>
      </nav>
      <Outlet />                                  {/* dveře pokoje */}
    </>
  )
}

Uživatel klikne na odkaz vedoucí na /produkty/3. Co udělá recepce:

<Link> nezpůsobí obnovení stránky. Jen změní adresu v prohlížeči a dá vědět routeru.
Router projde seznam rout. / sedí na začátek adresy → vykreslí Layout. V jeho children najde produkty/:productId, které sedí na zbytek.
Layout se vykreslí s navigací a místo <Outlet /> se objeví ProductDetail. Navigace zůstala stejná – změnil se jen pokoj.
V ProductDetail zjistíme číslo pokoje přes useParams():

function ProductDetail() {
  const { productId } = useParams()          // "3" – vždy TEXT, ne číslo!
  const product = products.find((p) => p.id === Number(productId))
  if (!product) return <p>Produkt nenalezen</p>
  return <h2>{product.name}</h2>
}

Dvojtečka v :productId říká: „tady může být cokoli a zapamatuj si to pod tímhle jménem“. Číslo na dveřích pokoje je ale vždycky napsané – je to text. Proto Number(productId).

Ukázka

Obchod: layout, NavLink, :productId, 404

Co vidíš: Obchod z příkladu výše. Nahoře falešný adresní řádek se šipkami Zpět/Vpřed, pod ním navigace (layout) a v kartě obsah aktuální stránky (<Outlet />).

Vyzkoušej:

Klikni na Produkty. Adresa se změní na /produkty, tlačítko se zvýrazní (to umí NavLink) a v kartě je seznam. Navigace nahoře zůstala.
Klikni na produkt. Adresa ukazuje jeho číslo, karta ukazuje detail.
Použij šipku ← v adresním řádku. Vrátíš se na seznam – historie funguje jako v opravdovém prohlížeči.
Klikni na Rozbitý odkaz. Žádná routa nesedí, takže zabere * a ukáže se 404.

Co z toho plyne: Každá obrazovka má svou adresu, layout se nemění a mění se jen obsah v <Outlet />. A všechno bez obnovení stránky.

Načítám interaktivní část…

API	K čemu
`<Link to>`	Navigace bez obnovení stránky. Relativní cesty se řeší vůči aktuální routě.
`<NavLink>`	Link, který ví, že je aktivní (menu, záložky).
`<Outlet />`	Místo v layoutu, kam se vykreslí vnořená routa.
`useParams()`	Proměnné části adresy (:id). Vždy text – převeď si je!
`useNavigate()`	Navigace z kódu (po odeslání formuláře, po přihlášení).
`<Navigate to replace />`	Přesměrování při renderu (chráněné stránky).
`useLocation()`	Aktuální adresa: pathname, search, state.

2. Stav v adrese: search params

Když si v hotelu objednáš pokoj „s výhledem na moře a postýlkou“, chceš, aby to platilo i zítra a aby to kolega, kterému pošleš rezervaci, dostal stejně. Přání proto patří do rezervace, ne do tvé hlavy.

Filtry, řazení, stránkování, hledaný výraz – to všechno jsou přání k obsahu stránky. Kdyby byla jen v useState, po obnovení stránky by zmizela a kolega by po otevření odkazu viděl něco jiného. Patří proto do search params – části adresy za otazníkem: /produkty?kategorie=ovoce&razeni=cena.

function Catalog() {
  const [searchParams, setSearchParams] = useSearchParams()

  // Čtení: jako z mapy, chybějící hodnota je null
  const category = searchParams.get('kategorie')            // "ovoce" | null
  const sort = searchParams.get('razeni') ?? 'nazev'

  // Zápis: změní adresu → komponenta se překreslí s novými hodnotami
  function setCategory(value: string | null) {
    setSearchParams((prev) => {
      const next = new URLSearchParams(prev)
      if (value) next.set('kategorie', value)
      else next.delete('kategorie')
      return next
    })
  }

  const visible = products.filter((p) => !category || p.category === category)
  // …
}

useSearchParams funguje podobně jako useState: vrátí aktuální hodnoty a funkci na změnu. Jen „sešitem“ je adresa.
Při změně kopírujeme předchozí parametry (new URLSearchParams(prev)) a měníme jen jeden – ostatní přání zůstanou.
Viditelné produkty se počítají z adresy, nikde se neukládají. Odvozený stav z lekce o stavu.

Ukázka

Filtrovaný katalog s useSearchParams

Co vidíš: Katalog s hledáním, kategoriemi a řazením. Všechny tři filtry žijí jen v adrese – sleduj adresní řádek nahoře. Ukázka začíná na adrese /?kategorie=ovoce, jako by ti ji někdo poslal.

Vyzkoušej:

Všimni si, že je rovnou vybrané ovoce – přišlo z adresy.
Vyber zelenina a řazení Podle ceny. Adresa ukáže oba parametry.
Klikni na šipku ← v adresním řádku. Vrátí se předchozí filtr – každá změna kategorie je krok v historii.
Napiš něco do hledání. Parametr q se mění s každým písmenem, ale historii nezaplevelí (kód používá replace).

Co z toho plyne: Stav v adrese přežije obnovení stránky, jde poslat odkazem a funguje s tlačítky Zpět a Vpřed. Komponenta ho jen čte a počítá z něj.

Načítám interaktivní část…

3. Loadery: pokoj připravený předem

Ve špatném hotelu tě pošlou do pokoje a pokojská začne uklízet, až když vejdeš. Čekáš ve dveřích. V dobrém hotelu je pokoj připravený dřív, než do něj vstoupíš.

Bez loaderu načítá data komponenta sama – v efektu, až když se vykreslí. Uživatel nejdřív uvidí prázdnou stránku se „Načítám…“, a když má stránka vnořené části, každá začne načítat až po té nadřazené (tzv. vodopád). Loader je pokojská: router ho zavolá před vykreslením stránky a komponenta dostane data hotová.

// Pokojská: načte data dřív, než se stránka ukáže
async function productLoader({ params }: LoaderFunctionArgs) {
  const product = await fetchProduct(Number(params.id))
  if (!product) throw new Response('Produkt nenalezen', { status: 404 })
  return { product }
}

// Routa: k pokoji přiřadíme pokojskou a „recepční pro problémy“
{ path: 'produkt/:id', loader: productLoader, element: <ProductPage />, errorElement: <ErrorPage /> }

// Komponenta: žádný useEffect, žádné „Načítám…“ – data už jsou
function ProductPage() {
  const { product } = useLoaderData<typeof productLoader>()
  return <h2>{product.name}</h2>
}

Co se stane po kliknutí na odkaz na produkt:

Router pozná cílovou routu a zavolá její loader. Stará stránka zatím zůstává vidět.
Během čekání je useNavigation().state rovno 'loading' – můžeš ukázat ukazatel průběhu.
Loader doběhne → router přepne adresu i stránku najednou a komponenta si data vezme přes useLoaderData.
Když loader vyhodí chybu (třeba Response s 404), místo stránky se vykreslí errorElement – recepce řekne „takový pokoj nemáme“.

Ukázka

Loadery, useNavigation a errorElement

Co vidíš: Seznam produktů a detail, obojí s loaderem. Falešné API odpovídá se zpožděním. Nad kartou se během navigace ukáže „Načítám další stránku…“.

Vyzkoušej:

Klikni na produkt. Seznam zůstane vidět, zprůhlední se a objeví se hláška o načítání. Pak se najednou přepne adresa i obsah.
Klikni na ← Zpět a vyber jiný produkt. Detail nikdy neukáže prázdné „Načítám…“ – data přijdou s ním.
Klikni na Neexistující produkt. Loader vyhodí 404 a místo detailu se ukáže chybová stránka.

Co z toho plyne: Data se načtou před vykreslením. Komponenta řeší jen zobrazení a chyby má na starosti errorElement.

Načítám interaktivní část…

Režim React Routeru	Co to je	Kdy
Declarative	<BrowserRouter> + <Routes>/<Route> v JSX	Jednoduché aplikace, postupná migrace.
Data	createBrowserRouter + loader/action/errorElement	SPA, kde chceš načítání dat svázané s routami.
Framework	Vite plugin, routy podle souborů, SSR, typegen	Nové full-stack aplikace (nástupce Remixu).

4. Chráněné stránky: vrátný u VIP patra

Na VIP patro hotelu se nedostaneš jen tak – u výtahu stojí vrátný. Když nemáš kartu, pošle tě na recepci, a ta si poznamená, kam jsi chtěl. Po vyřízení tě pošle rovnou tam.

V routeru je vrátný layout routa bez vlastní adresy. Obalí chráněné stránky a rozhodne, jestli pustí dál (<Outlet />), nebo přesměruje na přihlášení:

function RequireAuth() {
  const { user } = useAuth()
  const location = useLocation()
  if (!user) {
    // na recepci – a poznamenej si, kam host chtěl
    return <Navigate to={`/login?redirect=${location.pathname}`} replace />
  }
  return <Outlet />                                    // pusť dál
}

// Routa bez path: nepřidá nic do adresy, jen obalí děti
{ element: <RequireAuth />, children: [
  { path: 'ucet', element: <Account /> },
  { path: 'ucet/nastaveni', element: <Settings /> },
]}

replace zařídí, že se přesměrování nezapíše do historie – tlačítko Zpět pak nevede znovu k vrátnému. Dokončit přihlášení s návratem tam, kam uživatel chtěl, je úkolem druhé výzvy.

Ověř si to

Kvíz Uživatel filtruje produkty podle kategorie. Kam uložit vybranou kategorii?

useState v komponentě seznamuDo adresy (search params)Do localStorageDo Contextu

Kvíz Co vrátí useParams().id pro adresu /produkty/42?

číslo 42text "42"undefined{ id: 42 }

Kvíz Co se stane, když v aplikaci s routerem použiješ <a href='/produkty'> místo <Link to='/produkty'>?

Nic, je to totéžProhlížeč stránku obnoví – aplikace se načte znovu a ztratí se všechen stavOdkaz nebude fungovat

Rozcvička

Výzva

Odkaz na druhou stránku

Rozcvička

Dvě stránky, dva odkazy. Sleduj, jak se mění adresa nahoře.

Zadání (stejný text je v komentáři na začátku souboru)

VÝZVA: Odkaz na druhou stránku

Routy jsou hotové: '/' (Domů) a '/o-nas' (O nás). Chybí odkazy mezi nimi.

1. Na stránce Home doplň <Link to="/o-nas">O nás</Link>
2. Na stránce About doplň <Link to="/">Zpět domů</Link>

Načítám interaktivní část…

Mám hotovo

Výzvy

Mini e-shop procvičí kapitoly 1 a 2: layout, seznam, detail, filtr v adrese a 404. Chráněné stránky dotáhnou kapitolu 4 – vrátného i návrat tam, kam uživatel původně chtěl.

Výzva

Mini e-shop

Střední Bonusová výzva

Kompletní routování malé aplikace: layout, seznam, detail, stav v adrese a 404.

🔒 Bonusová výzva

Střední a těžké výzvy jsou bonus pro přihlášené. Registrace je zdarma – stačí e-mail, žádné heslo.

Výzva

Chráněné stránky

Střední Bonusová výzva

Vzor, který najdeš v každé aplikaci s přihlášením: vrátný + návrat tam, kam uživatel původně chtěl.

🔒 Bonusová výzva

Střední a těžké výzvy jsou bonus pro přihlášené. Registrace je zdarma – stačí e-mail, žádné heslo.

Shrnutí

Router je recepce: podle adresy vykreslí správnou stránku bez obnovení. Vnořené routy + <Outlet /> = společný layout.
Navigace: Link/NavLink v JSX, useNavigate v handlerech, <Navigate /> při renderu. Nikdy <a href>.
Parametry z adresy jsou text. Filtry, řazení a stránkování patří do search params.
Loader je pokojská: data připraví před vykreslením; errorElement řeší chyby a 404.
Chráněné stránky: layout routa bez path jako vrátný, <Navigate replace> na přihlášení a návrat zpět.

Načítám lekci…

💬 Našel jsi chybu, něco ti není jasné, nebo máš nápad? Napiš mi.