Průvodce používáním Reag-router-dom

Pro jakoukoli netriviální aplikaci React ji musíte rozdělit na více stránek. K tomu je nutné implementovat směrování reakcí.

To může být zpočátku zastrašující téma. Tento tutoriál vás však seznámí se všemi nezbytnými základy. V tomto tutoriálu budeme vytvářet aplikaci, která používá směrování.

Table of Contents

Co je React Routing (směrování na straně klienta)

Směrování React je forma směrování na straně klienta implementovaná v aplikacích React. Směrování na straně klienta je alternativou směrování na straně serveru. Při směrování na straně serveru prohlížeč odešle na webový server požadavek GET, kdykoli přejdete na jinou stránku. Tento požadavek může trvat několik sekund, než obdržíte odpověď.

U webové aplikace, kde se neustále přesouváte mezi stránkami, vytváří čekací doba špatný uživatelský dojem. Alternativou k tomu je směrování na straně klienta. Namísto poskytování HTML HTML, aplikace používá JavaScript ke generování HTML pro různé stránky.

Stačí zadat soubor index.html jako vstupní bod, aby vaše aplikace fungovala. Tento vstupní bod pak načte váš kód JavaScript. Balíček JavaScript vykreslí stránky manipulací s DOM, zpracováním směrování a implementací funkcí aplikace.

Protože server vykresluje pouze stránku index.html, aplikace se nazývá jednostránková aplikace.

Výhody směrování na straně klienta

Vytváří lepší uživatelský dojem, protože navigace je rychlejší a aplikace bude pohotovější. Při směrování na straně serveru je každá navigace síťovým požadavkem s několikasekundovou latencí.
Umožňuje vytváření offline aplikací, protože veškerý kód potřebný ke spuštění aplikace lze ukládat lokálně do mezipaměti. To vám umožní vytvářet více dostupných aplikací a nabízet offline funkce.
Aplikace také spotřebuje méně dat, protože síťové požadavky se výrazně sníží, pokud je vše odesláno jednou a některé soubory jsou ukládány lokálně.
Snižuje také zatížení serveru, protože server musí aplikaci vykreslit pouze jednou. To je v kontrastu s vykreslováním na straně serveru, kde server neustále vykresluje aplikaci.

Dále si proberme, jak implementovat směrování reakcí.

Jak implementovat React Routing

Pro tento tutoriál vytvoříme jednoduchou aplikaci pro psaní poznámek. Bude se skládat z více stránek. Implementujeme směrování na straně klienta pomocí React Router DOM, abychom klientovi umožnili navigaci mezi různými stránkami. Nebudeme budovat vše, aby aplikace fungovala. Místo toho se zaměříme na směrování.

Předpoklady

Abyste mohli sledovat tento tutoriál, musíte rozumět HTML, JavaScript a React. Budete také muset mít nainstalovaný Node.js a NPM. Můžete si je stáhnout a nainstalovat současně instalací Nodejs z webová stránka. Nebo postupujte podle průvodce ve vloženém videu YouTube.

Co Stavíme

Aplikace bude mít více stránek. Pomocí směrování reakcí budete moci přejít na různé stránky. Návrhy stránek jsou uvedeny níže.

Domovská stránka je vykreslena na trase ‚/‘.

6 Cloudové monitorování serverů pro malé a střední podniky

Stránka About je vykreslena na trase ‚/about‘.

Stránka s poznámkami na cestě ‚/notes‘.

Nová stránka poznámek na cestě ‚/notes/new‘.

Každou poznámku můžete vidět v plném znění na stránce poznámek. Tato stránka je vykreslena na cestě ‚/routes/‚, kde je celé číslo představující id poznámky, kterou chceme číst.

Začínáme

Chcete-li začít, vytvořte nový projekt React. Budu používat Vite, takže příkaz k inicializaci nového projektu je tento:

npm create vite@latest scribbble --template react

Zadal jsem ‚čmárat‘ jako název projektu a React jako šablonu. Dále otevřu VS kód pomocí níže uvedených příkazů:

cd scribbble
code .

Po otevření kódu VS se vrátím do okna terminálu a nainstaluji reakci-router-dom. Tento balíček usnadňuje implementaci směrování reakcí ve vašich aplikacích.

npm install react-router-dom

Vytvoříme soubor, do kterého se budou ukládat naše poznámky. Vytvořte soubor src/notes.js a přidejte následující kód:

const notes = [
{
id: 1,
title: "Note 1",
body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
},
{
id: 2,
title: "Note 2",
body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
},
{
id: 3,
title: "Note 3",
body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
},
];

export default notes;

Dále odstraňte soubor src/App.css. V tomto projektu jej nepoužijeme. Nezapomeňte také odebrat import souboru App.css ze souboru App.jsx.

Poté nahraďte vše v souboru index.css tímto:

:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;font-weight:400;color:#404040}*{margin:0;padding:0}.nav-container{display:flex;justify-content:space-between;padding:15px 30px}.home-buttons,.nav{display:flex;gap:10px}a{text-decoration:none;color:inherit;font-weight:600}h1{font-size:63px;margin:20px 0}input,textarea{border:1px solid #f1f1f1;background-color:#fafafa;outline:0;padding:10px;width:100%}textarea{resize:none;font-family:inherit}.container{padding:15px}.primary{background-color:#8a2be2;color:#fff}.secondary{background-color:#eee}.button{padding:15px 30px;font-size:16px;border:none;font-weight:700;border-radius:7px;cursor:pointer}.home-container{height:300px;display:flex;flex-direction:column;align-items:center;justify-content:center}.new-note-container{padding:20px}.new-note-form{display:flex;flex-direction:column;align-items:center;width:500px;gap:20px;margin:auto;border-radius:7px;padding:20px 30px}.notes-list{display:grid;grid-template-columns:1fr 1fr 1fr;gap:30px;padding:0 60px}.note{border:1px solid #d3d3d3;padding:15px;border-radius:7px}.note h2{font-size:1rem;margin-bottom:10px}.note p{color:#585858;font-size:.9rem;cursor:pointer}.note-container{display:flex;align-items:center;justify-content:center;padding:50px}.note-content{width:500px}

Dále vytvořte následující soubory pro stránky, které budeme vytvářet:

src/pages/Home.jsx
src/pages/About.jsx
src/pages/Note.jsx
src/pages/NewNote.jsx
src/pages/Notes.jsx

Poté vytvořte soubor pro komponentu Navigační panel. Tento soubor bude umístěn na src/components/NavBar.jsx

Nastavení React Routing

Po nastavení naší aplikace nastavíme v naší aplikaci dále směrování.

Opravte problém Nexus Mod Manager, který se vyskytl během instalace

Otevřete soubor App.jsx a odstraňte vše, co je uvnitř. Dále do horní části souboru přidejte následující importy:

import { BrowserRouter, Routes, Route } from "react-router-dom";
import { NavBar } from "./components/NavBar";
import { Home } from "./pages/Home";
import { About } from "./pages/About";
import { Notes } from "./pages/Notes";
import { Note } from "./pages/Note";
import { NewNote } from "./pages/NewNote";

Importujeme komponenty BrowserRouter, Routes a Routes z Reag-router-dom. Ty budou použity k nastavení routeru. Dále jsme importovali NavBar z našeho adresáře komponent a několik stránek z našich souborů stránek. Stránky jsme ještě neimplementovali, ale brzy to uděláme.

Dále nastavíme naši komponentu aplikace:

export default App () {

}

Poté do našeho příkazu return přidáme následující označení:

return (
    <BrowserRouter>
      
    </BrowserRouter>
)

Tím se vykreslí BrowserRouter, komponenta React poskytovaná komponentou React-router-dom. Tato součást konfiguruje router, který funguje v rámci prohlížeče. Naše aplikace bude obsažena uvnitř těchto značek.

Dále přidáme navigační lištu a vytvoříme komponentu Routes.

return (
    <BrowserRouter>
      <NavBar />
      <div className="container">
        <Routes>
          
        </Routes>
      </div>
    </BrowserRouter>
  );

Do prvku BrowserRouter jsme přidali NavBar. Tento prvek definujeme později, ale vytváří odkazy v horní části každé stránky. Namísto psaní zvlášť pro každou stránku vytvoříme jeden NavBar.

Poté jsme vytvořili prvek kontejneru. Tento prvek není nutný pro směrování. Právě jsme ji přidali, abychom použili styling.

Do kontejneru jsme přidali komponentu Routes. Zde se budou vykreslovat různé stránky v závislosti na trase, na které se prohlížeč nachází. Vše uvnitř komponenty Trasy bude znovu vykresleno pokaždé, když se trasa změní.

Nakonec přidáme trasy pro různé stránky.

  return (
    <BrowserRouter>
      <NavBar />
      <div className="container">
        <Routes>
          <Route path="/" Component={Home} />
          <Route path="about" Component={About} />
          <Route path="notes" Component={Notes}>
            <Route path="new" Component={NewNote} />
            <Route path=":id" Component={Note} />
          </Route>
        </Routes>
      </div>
    </BrowserRouter>
  );

Komponenta Home bude vykreslena, když je cesta ‚/‘, a komponenta About bude vykreslena na trase ‚/about‘. Komponenta Notes bude vykreslena cestou ‚/notes‘. Máme také trasy ‚/notes/new‘ a ‚/notes/:id‘ definované jako vnořené trasy.

Vysvětlení vnořených tras

Trasa může obsahovat vnitřní cesty. Tyto trasy se nazývají vnořené trasy. Cesta k těmto vnořeným trasám bude spojena s nadřazenou trasou a vytvoří úplnou cestu. Například trasy „poznámky“ a „nové“ budou spojeny do „/poznámky/nové“.

Pokud jde o způsob vykreslení komponent, když uživatel přejde na nadřazenou trasu, bude vykreslena pouze nadřazená komponenta. Nadřazené a vnořené komponenty se však při navigaci po vnořené trase vykreslí společně.

Aby bylo možné vykreslit obě komponenty společně, musí komponenta Notes vykreslit komponentu Outlet, která určuje, kam bude komponenta Note vložena. Uvidíte to později, až začneme vytvářet stránky.

Dynamické trasy

Zatím jsme specifikovali doslovnou cestu, kterou chceme spárovat. Například trasy ‚/‘ a ‚about‘. Reag-router-dom nám však umožňuje specifikovat dynamické cesty. Dynamická trasa obsahuje část, kterou lze porovnat s parametrem dotazu. Po shodě je parametr dotazu předán stránce.

Například uvnitř rodičovské trasy ‚příspěvky‘ máme vnořenou trasu, která obsahuje dynamickou část určenou pomocí :id. Tato trasa přijímá jakýkoli text namísto :id a tento text se stane dostupným pro komponentu Note jako id.

Jak zobrazit své statistiky na Spotify

Vytvoření navigační lišty

K navigaci pomocí Reagovat-router-dom používáme komponenty Link namísto běžných kotevních značek. Náš navigační panel by tedy měl vypadat takto:

import { Link } from "react-router-dom";

export function NavBar() {
  return (
    <div className="nav-container">
      <Link to="/">Scribbble</Link>
      <nav className="nav">
        <Link to="/about">About</Link>
        <Link to="/notes">Notes</Link>
        <Link to="/notes/new">New Note</Link>
      </nav>
    </div>
  );
}

Přidejte kód do src/pages/NavBar.jsx.

Budování stránek

Dále se chystáme vytvořit stránky. Pro domovskou stránku přidejte následující kód do souboru src/pages/Home.jsx.

import { useNavigate } from "react-router-dom";

export function Home() {
  const navigate = useNavigate();

  return (
    <div className="home-container">
      <h1>Notes for professionals</h1>
      <div className="home-buttons">
        <button
          onClick={() => {
            navigate("/notes/new");
          }}
          className="button primary"
        >
          Start Scribbling
        </button>
        <button
          onClick={() => {
            navigate("/notes");
          }}
          className="button secondary"
        >
          View Notes
        </button>
      </div>
    </div>
  );
}

Na domovské stránce bychom rádi používali tlačítka k navigaci. V důsledku toho používáme háček useNavigate k programové navigaci. Importovali jsme háček a pak jsme jej nazvali uvnitř Home Component. Návratová hodnota po volání háku je funkce, kterou můžete použít k navigaci.

Dále definujeme stránku O aplikaci. Přidejte následující kód do svého souboru src/pages/About.jsx.

export function About() {
  return (
    <div>
      <h1>About</h1>
      <p>Simple Notes is the best note-taking application for professionals</p>
    </div>
  );
}

Poté definujeme stránku Poznámky.

V této komponentě musíme také zahrnout komponentu Outlet, která bude použita k vykreslení jakýchkoli vnořených tras. Z tohoto důvodu bude naše stránka src/pages/Notes.jsx vypadat takto.

import { Outlet, useNavigate } from "react-router-dom";
import notes from "../notes";

export function Notes() {
  const navigate = useNavigate();
  return (
    <div>
      <Outlet />
      <div className="notes-list">
        {notes.map((note) => {
          return (
            <div
              className="note"
              key={note.id}
              onClick={() => {
                navigate("/notes/" + note.id);
              }}
            >
              <h2>{note.title}</h2>
              <p>{note.body.slice(0, 100)}</p>
            </div>
          );
        })}
      </div>
    </div>
  );
}

Dále definujeme stránku Poznámka.

Toto bude vykresleno pro jednotlivou poznámku. Chcete-li rozhodnout o vykreslení poznámky, bude Notes přistupovat k id zadanému v dynamické části trasy. K tomu používáme háček userParams. Proto by to měl být kód uvnitř vašeho souboru src/pages/Note.jsx:

import { useParams } from "react-router-dom";
import notes from "../notes";

export function Note() {
  const params = useParams();
  const note = notes.find((note) => note.id == params.id);
  return (
    <div className="note-container">
      <div className="note-content">
        <h2>{note.title}</h2>
        <p>{note.body}</p>
      </div>
    </div>
  );
}

Nakonec vytvoříme komponentu NewNote uvnitř src/pages/NewNote.jsx pomocí následujícího kódu:

export function NewNote() {
  return (
    <div class="new-note-container">
      <form class="new-note-form">
        <h2>New Note</h2>
        <input type="text" name="title" placeholder="Note title" />
        <textarea rows="10" placeholder="Note text" />
        <button class="button primary">Save Note</button>
      </form>
    </div>
  );
}

V tuto chvíli jsme napsali veškerý kód pro aplikaci. Aplikaci můžete spustit pomocí npm run dev. Přejděte na různé stránky a zjistěte, jak rychlé je směrování klienta.

Nevýhody směrování na straně klienta

Navzdory mnoha výhodám má směrování na straně klienta několik nevýhod. Ty jsou vysvětleny níže:

Počáteční načítání stránky může být pomalé, protože se musí načíst celá aplikace. Balíček JavaScriptu může být velmi velký a vyžaduje dlouhé doby načítání.
Protože JavaScript generuje označení, stránka nebude optimalizována pro SEO.
Protože vše závisí na JavaScriptu, prohlížeče, které JavaScript nepodporují nebo které mají JavaScript vypnutý, nebudou moci aplikaci spustit.

Závěr

V tomto článku jsme se zabývali směrováním reakcí vytvořením malého projektu. I když jsme nepopsali vše, tento tutoriál pokrývá koncepty, které využijete ve většině projektů, na kterých budete pracovat. Více informací o Reag-router-dom naleznete zde oficiální dokumenty.

Dále si přečtěte tento článek o knihovnách formulářů React.