Routování v React aplikacích pomocí React Router

Každá moderní webová aplikace potřebuje navigaci mezi různými stránkami. V případě React aplikací se k tomuto účelu nejčastěji používá React Router, který umožňuje efektivní a snadné zpracování routování. V tomto článku se podíváme na to, co je React Router, jak funguje a jak jej můžete správně implementovat ve své aplikaci.

Co je React Router?

React Router je knihovna, která umožňuje navigaci v single-page aplikacích (SPA). Díky němu můžeme přepínat mezi různými stránkami bez nutnosti obnovování celé stránky.

Jaký má routování v Reacte praktický význam?

Správné routování v Reacte umožňuje:

Vytvářet dynamické a vícestránkové aplikace.
Zlepšit uživatelský zážitek tím, že se stránka nenačítá při každé změně.
Jednoduše spravovat URL a navigaci v aplikaci.

1. Instalace React Router

Předtím, než začnete, je třeba nainstalovat balík react-router-dům:

npm install react-router-dům

Pokud používáte Yarn, můžete jej nainstalovat pomocí:

yarn add react-router-dům

2. Základní struktura React Router

Nejjednodušším způsobem použití React Router je zavést jej do aplikace následovně:

import { BrowserRouter, Routes, Route } from "react-router-dům"; function Domů() { return <h2>Domovská stránka</h2>; } function O_nas() { return <h2>O nás</h2>; } function App() { return ( <BrowserRouter> <Routes> <Route path="/" element={<Domů />} /> <Route path="/o-nas" element={<O_nas />} /> </Routes> </BrowserRouter> ); } export default App;

Vysvětlení:

BrowserRouter – Obaluje aplikaci a umožňuje správu URL cest.
Routes – Obsahuje jednotlivé Route, které definují cesty.
Route – Určuje cestu a komponentu, která se zobrazí.

3. Přidání navigace

React Router poskytuje komponentu Link, která umožňuje navigaci mezi stránkami bez jejich obnovení.

import { BrowserRouter, Routes, Route, Link } z "react-router-dům"; function Domů() { return <h2>Domovská stránka</h2>; } function O_nas() { return <h2>O nás</h2>; } function Navigace() { return ( <nav> <Link to="/">Domů</Link> | <Link to="/o-nas">O nás</Link> </nav> ); } function App() { return ( <BrowserRouter> <Navigace /> <Routes> <Route path="/" element={<Domů />} /> <Route path="/o-nas" element={<O_nas />} /> </Routes> </BrowserRouter> ); } export default App;

Nyní máme navigaci, která umožňuje přepínání mezi stránkami.

Online kurz programovania v Jave

Programovanie nie je ťažké! Kódenie vlastných appiek v nástroji Java je veľká zábava. Do konca leta programujete vy sami alebo vaše bystré deti svoje prvé appky

Prvá hodina zadarmo!

7dňová výzva programovania Webu

Budete vedieť vytvárať pekné weby koncom budúceho týždňa? Áno, dá sa to! Radi vám s tým pomôžeme. Stačí prijať Sedemdňovú výzvu a rezervovať si tento kurz

Prvá hodina zadarmo!

4. Dynamické routování pomocí parametrů

Často je třeba předávat parametry do URL. Toho dosáhneme pomocí useParams hooku.

import { useParams } from "react-router-dům"; function Profil() { let { id } = useParams(); return <h2>Profil uživatele: {id}</h2>; }

Přidání dynamického routu:

Pokud nyní navštívíte /profil/123, zobrazí se „Profil uživatele: 123“.

Nejčastější otázky

1. Jaký je rozdíl mezi `BrowserRouter` a `HashRouter`?

BrowserRouter používá čisté URL, zatímco HashRouter používá „#“ v URL pro kompatibilitu se staršími servery.

2. Jak přesměrovat uživatele na jinou stránku?

Můžete použít hook useNavigate:

import { useNavigate } from "react-router-dům"; function Domů() { let navigate = useNavigate(); return <button onClick={() => navigate("/o-nas")}>Přejít na O nás</button>; }

3. Jak vytvořit chybovou stránku (404)?

Přidejte do Routes defaultní cestu *:

<Route path="*" element={<h2>Stránka neexistuje</h2>} />

Top 5 zajímavých faktů o React Router

React Router byl poprvé vydán v roce 2014 a od té doby se stal standardem pro navigaci v React aplikacích.
React Router verze 6 přinesla významné zjednodušení kódu v porovnání s předchozími verzemi.
Umožňuje nejen klientské, ale i server-side routování (například v Next.js).
Podporuje lazy loading, čímž zvyšuje výkonnost aplikace.
Pomocí useNavigate je možné programově měnit URL bez potřeby obnovování stránky.

Chcete se naučit programovat?

Máte-li zájem o prezenční nebo online školení programování, podívejte se na naši nabídku na www.like-it.sk. Naše kurzy vedou zkušení odborníci, kteří vám pomohou zvládnout základy i pokročilé koncepty programování.

Kurz UML - Základy jazyka UML v nástroji Enterprise Architect