8

React router

Pomocí routeru dokážeme v Reactu vyrobit vícestránkovou aplikaci.

Webové aplikace o více stránkách jsou v dnešní době standard. Představte si muzeum s jedním jediným obrazem - pořád to může být dechberoucí zážitek, ale omrzí výrazně rychleji. Jednostránkové weby rozhodně mají své místo, dnes se však naučíme způsob, jak naši aplikaci rozšířit o další stránky a posunout ji na vyšší úroveň.

Single-page application (SPA)

Je typ aplikace, u které se obsah stránky mění dynamicky za jejího běhu, aniž by bylo třeba přenačítat celou stránku znovu. Výhodou je rychlejší a hladší navigace stránkou - uživatel nemusí čekat na načítaní každé jednotlivé podstránky. Další plus je snížená zátěž na server, protože místo odpovědi pro každou navštívenou stránku stačí uživateli odpovědět jen jednou a o navigaci se postará jeho prohlížeč. SPA mají i své nevýhody - například horší možnosti SEO optimalizace, ale to už je nad rámec této lekce.

React Router

Neexistuje žádný magický přepínač, kterým bychom rozhodli, jestli z aplikace uděláme SPA nebo ne. Takovou funkcionalitu někdo musel nejdříve vymyslet, implementovat a následně aktivně používat v kódu. Naštěstí žijeme v krásné době, kde je taková implementace hotová a připravená k použití. K práci s navigací v našich React aplikacích budeme používat knihovnu React Router. Nainstalujeme si ji jako závislost přes npm a následně z ní můžeme používat připravené komponenty přímo v našem kódu.

Instalace a používání knihovny

Do existujícího projektu můžeme nainstalovat React Router knihovnu přest terminál pomocí npm.

npm install react-router-dom

Nyní máme v projektu k dispozici celou škálu komponent, se kterými můzeme pracovat. Stačí si je správně naimportovat a použít jako kteroukoliv jinou komponentu.

import React from 'react';
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from 'react-router-dom';

const Home = () => {
  return <h2>Home</h2>;
}

const About = () => {
  return <h2>About</h2>;
}

const Users = () => {
  return <h2>Users</h2>;
}

const App = () => (
  <Router>
    <div>
      <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/users">Users</Link>
          </li>
        </ul>
      </nav>

      <Switch>
        <Route path="/about">
          <About />
        </Route>
        <Route path="/users">
          <Users />
        </Route>
        <Route path="/">
          <Home />
        </Route>
      </Switch>
    </div>
  </Router>
);

Cvičení: React Router

1

Vlastní navigace

zapni hlavu

Vyzkoušejme si přidání React Router knihovny do naší vlastní aplikace. Zkusíme si udělat vlastní navigaci a pár jednoduchých stránek.

  1. Vygenerujte si novou aplikaci pomocí příkazu

      npx create-czechitas-app react-router
    

    nebo si otevřete již existující projekt. V případě vygenerování nové aplikace vám vznikne složka react-router, nezapomeňte do ní přejít příkazem cd react-router.

  2. Nainstalujte si knihovnu React Router pomocí npm. Zavolejte příkaz

    npm install react-router-dom
    
  3. Spusťte si aplikaci příkazem npm start a zkontrolujte, že vám v prohlížeči správně běží.

  4. Nebojte se v následujících krocích inspirovat dokumentací React Routeru!

  5. V src adresáři vytvořte nové soubory (komponenty) pro jednotlivé stránky. Adekvátně je pojmenujte, tedy: Home.jsx, About.jsx a Detail.jsx. Obsah stránek může být jen jeden paragraf s krátkou zprávou. Nezapomeňte na správný export. Příklad obsahu jedné stránky:

    const Home = () => {
       return <p>Jsem domovská stránka</p>
    }
    
  6. V souboru index.jsx si naimportujte vaše tři vytvořené stránky.

  7. V souboru index.jsx si naimportujte všechny potřebné komponenty z react-router-dom. Příklad jednoho importu:

    import { Link } from 'react-router-dom';
    
  8. Podle dokumentace obalte jsx celé aplikace do <Router> komponenty. To vaší aplikaci umožní uvnitř používat ostatní komponenty z react-router-dom.

  9. Použitím komponenty <Link> vložte do <header> prvku odkazy na následující stránky:

    1. text: 'Home', cesta: '/'
    2. text: 'About', cesta: '/about'
    3. text: 'Detail', cesta: '/detail'

    V prohlížeči si rovnou můžete vyzkoušet, že klikání na odkazy mění vaši url adresu za lomítkem v adresním řádku.

  10. Podívejte se v dokumentaci, jak se zapisuje struktura s React Router komponentami <Switch> a <Route>. Tuto strukturu vložte do kódu do sekce <main> a uvnitř použijte vaše tři nové stránky Home, About a Detail, které jste si naimportovaly.

  11. Vyzkoušejte, že aplikace správně naviguje - mění adresu a obsah podle klikání na odkazy.

  12. Přidejte zajímavější obsah dle libosti a nastylujte jednotlivé stránky a navigaci!

Dynamické detaily stránek

Jsou weby, kde si vystačíme s pár stránkami - Domovská stránka, O nás, Kontakt. Tyhle tři stránky si nachystáme v kódu, nastylujeme a máme hotovo. Jednou za pár let možná upravíme naši adresu nebo telefonní číslo. Co ale takové blogy? Zpravodajské weby? Profily na Facebooku?! Takových článků a uživatelů jsou tisíce, miliony! Potřebujeme kódit komponentu pro každou novinku ze světa, pro každý profil? Naštěstí ne. Stačí nám jedna komponenta, např. UserProfile.jsx, která si dynamicky vyhmátne uživatele a do předpřipravené šablony vyplní jeho data z databáze. Jak ale naše aplikace pozná, kterého uživatele má zobrazit? K tomu nám pomáhají URL parametry.

URL parametry

URL parametry umí předávat dodatečné informace v adrese webu. Jsou tvořeny párem klíč a hodnota, ve formátu klic=hodnota a jednotlivé parametry se oddělují &. První parametr vždy začíná po symbolu otazníku v URL.

http://example.com?product=1234&utm_source=google

Právě v nich se dá najít informace, o jaký produkt, o jakého uživatele nebo o jaký článek se jedná. Pojďme se podívat, jak s nimi můžeme pracovat v React Routeru.

import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  useParams
} from "react-router-dom";

const ParamsExample = () => {
  return (
    <Router>
      <div>
        <h2>Accounts</h2>

        <ul>
          <li>
            <Link to="/netflix">Netflix</Link>
          </li>
          <li>
            <Link to="/zillow-group">Zillow Group</Link>
          </li>
          <li>
            <Link to="/yahoo">Yahoo</Link>
          </li>
          <li>
            <Link to="/modus-create">Modus Create</Link>
          </li>
        </ul>

        <Switch>
          <Route path="/:id" children={<Child />} />
        </Switch>
      </div>
    </Router>
  );
}

const Child = () => {
  let { id } = useParams();

  return (
    <div>
      <h3>ID: {id}</h3>
    </div>
  );
}

Cvičení: React Router

2

URL parametry

zapni hlavu

Vyzkoušejme si práci s URL parametry v naší React Router aplikaci. Podíváme se na to, jak vytvořit detailovou stránku a dostat na ní relevantní data.

  1. Otevřete si aplikaci v codesandboxu. Projděte si její soubory a strukturu. Úlohu můžete vypracovávat přímo v prohlížeči, nebo si obsah souborů správně překopírovat do vašeho lokálního projektu.
  2. V souboru App.jsx najděte kus kódu, kde se pomocí metody map vypisují názvy filmů jako paragrafy na stránku. Upravte tuto sekci tak, aby se místo paragrafů vypisovaly <Link> komponenty z react-router-dom. Pro hezčí stylování můžete zabalit celý výpis do <ul> a jednotlivé <Link> komponenty obalit do <li>. Cesta odkazu by měla vypadat jako /movies/id-filmu.
    <Link to={`/movies/${movie.id}`}>...</Link>
    
  3. V souboru Movie.jsx vytvořte detail jednoho filmu. Pomocí useParams hooku z react-router-dom zjistěte id současného filmu. V importovaném poli movies podle id najděte současně prohlížený film. Pomůže vám metoda find.
    const urlId = 'moje-id'
    const currentBook = books.find(book => book.id === urlId)
    
    O filmu vypište jeho název, popis a zobrazte obrázek.
  4. V souboru App.jsx odkomentujte <Route> komponentu uvnitř <Switch> komponenty. Zamyslete se, proč jsou path a children takové, jaké jsou. Porovnejte s dokumentací React Routeru.
  5. Vyzkoušejte, že aplikace funguje - správně naviguje a na stránce se mění detail filmu. Nastylujte dle libosti. Zkuste přidat vlastní film v souboru movies.js a pozorujte změny na stránce.