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.

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

1. React Router bol prvýkrát vydaný v roku 2014 a odvtedy sa stal štandardom pre navigáciu v React aplikáciách.
2. React Router verzia 6 priniesla významné zjednodušenie kódu v porovnaní s predchádzajúcimi verziami.
3. Umožňuje nielen klientské, ale aj server-side routovanie (napríklad v Next.js).
4. Podporuje lazy loading, čím zvyšuje výkonnosť aplikácie.
5. 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.

Marián Knězek

 

Súvisiace články:

• Inštalácia a nastavenie vývojového prostredia pre Javu
• Základy syntaxe a štruktúry v Jave
• Najčastejšie chyby začiatočníkov v Jave a ako sa im vyhnúť
• Čo je objektovo orientované programovanie (OOP) v Jave?
• Ako správne a efektívne debugovať Java aplikácie?
• Základy práce s komponentmi v Reacte
• Správa stavov v React aplikáciách