Routovanie v React aplikáciách pomocou React Router

Každá moderná webová aplikácia potrebuje navigáciu medzi rôznymi stránkami. V prípade React aplikácií sa na tento účel najčastejšie používa React Router, ktorý umožňuje efektívne a jednoduché spracovanie routovania. V tomto článku sa pozrieme na to, čo je React Router, ako funguje a ako ho môžete správne implementovať vo svojej aplikácii.

Čo je React Router?

React Router je knižnica, ktorá umožňuje navigáciu v single-page aplikáciách (SPA). Vďaka nemu môžeme prepínať medzi rôznymi stránkami bez nutnosti obnovovania celej stránky.

Aký má routovanie v Reacte praktický význam?

Správne routovanie v Reacte umožňuje:

Vytvárať dynamické a viacstránkové aplikácie.
Zlepšiť užívateľský zážitok tým, že sa stránka nenačítava pri každej zmene.
Jednoducho spravovať URL a navigáciu v aplikácii.

1. Inštalácia React Router

Predtým, ako začnete, je potrebné nainštalovať balík react-router-dom:

npm install react-router-dom

Ak používate Yarn, môžete ho nainštalovať pomocou:

yarn add react-router-dom

2. Základná štruktúra React Router

Najjednoduchším spôsobom použitia React Router je zaviesť ho do aplikácie nasledovne:

import { BrowserRouter, Routes, Route } from "react-router-dom";

function Domov() {
    return <h2>Domovská stránka</h2>;
}

function O_nas() {
    return <h2>O nás</h2>;
}

function App() {
    return (
        <BrowserRouter>
            <Routes>
                <Route path="/" element={<Domov />} />
                <Route path="/o-nas" element={<O_nas />} />
            </Routes>
        </BrowserRouter>
    );
}

export default App;

Vysvetlenie:

BrowserRouter – Obaluje aplikáciu a umožňuje správu URL ciest.
Routes – Obsahuje jednotlivé Route, ktoré definujú cesty.
Route – Určuje cestu a komponent, ktorý sa zobrazí.

3. Pridanie navigácie

React Router poskytuje komponent Link, ktorý umožňuje navigáciu medzi stránkami bez ich obnovenia.

import { BrowserRouter, Routes, Route, Link } from "react-router-dom";

function Domov() {
    return <h2>Domovská stránka</h2>;
}

function O_nas() {
    return <h2>O nás</h2>;
}

function Navigacia() {
    return (
        <nav>
            <Link to="/">Domov</Link> | 
            <Link to="/o-nas">O nás</Link>
        </nav>
    );
}

function App() {
    return (
        <BrowserRouter>
            <Navigacia />
            <Routes>
                <Route path="/" element={<Domov />} />
                <Route path="/o-nas" element={<O_nas />} />
            </Routes>
        </BrowserRouter>
    );
}

export default App;

Teraz máme navigáciu, ktorá umožňuje prepínanie medzi 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é routovanie pomocou parametrov

Často je potrebné odovzdávať parametre do URL. To dosiahneme pomocou useParams hooku.

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

function Profil() {
    let { id } = useParams();
    return <h2>Profil používateľa: {id}</h2>;
}

Pridanie dynamického routu:

<Route path="/profil/:id" element={<Profil />} />

Ak teraz navštívite /profil/123, zobrazí sa „Profil používateľa: 123“.

Najčastejšie otázky

1. Aký je rozdiel medzi `BrowserRouter` a `HashRouter`?

BrowserRouter používa čisté URL, zatiaľ čo HashRouter používa „#“ v URL pre kompatibilitu so staršími servermi.

2. Ako presmerovať používateľa na inú stránku?

Môžete použiť hook useNavigate:

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

function Domov() {
    let navigate = useNavigate();
    return <button onClick={() => navigate("/o-nas")}>Prejsť na O nás</button>;
}

3. Ako vytvoriť chybovú stránku (404)?

Pridajte do Routes defaultnú cestu *:

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

Top 5 zaujímavých faktov o React Router

React Router bol prvýkrát vydaný v roku 2014 a odvtedy sa stal štandardom pre navigáciu v React aplikáciách.
React Router verzia 6 priniesla významné zjednodušenie kódu v porovnaní s predchádzajúcimi verziami.
Umožňuje nielen klientské, ale aj server-side routovanie (napríklad v Next.js).
Podporuje lazy loading, čím zvyšuje výkonnosť aplikácie.
Pomocou useNavigate je možné programovo meniť URL bez potreby obnovovania stránky.

Chcete sa naučiť programovať?

Ak máte záujem o prezenčné alebo online školenie programovania, pozrite si našu ponuku na www.like-it.sk. Naše kurzy vedú skúsení odborníci, ktorí vám pomôžu zvládnuť základy aj pokročilé koncepty programovania.

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