React router¶

React router funguje obdobně jako jakýkoliv jiný router (softwarový, abstraktně i ten hardwarový) - pro konkrétní url přesměrovává requesty konkrétním komponentám.
Následující code snippet definuje jednoduchý router pro 3 koncové body Reactí aplikace a příslušné komponenty, které jsou mountovány při requestu na tento endpoint.

 import React from "react" 
//naimportime samotny router - je nutne jej nainstalovat
import {BrowserRouter, Routes, Route} from "react-router-dom";
//naimpotime konfiguraci stranek, ktere mame vytvorene
import {pages} from "./pagesData";
//vlastni datovy typ pro itemy, kterym router rozumi
import {RouterType} from "../lib/global/datatypes";

const Router = () =>{
    //vytvorime jednotlive routes
    //title je nadpis, ktery bude element mit, napriklad "Nahrat soubor" 
    //path je samotne URL, ktere bude poslouchano a smerovana na konkretni element
    //element je samotna komponenta, ktera bude zavolana pri samotnem requestu
    const routes = pages.map(({ path, title, element }: RouterType) =>{
        return <Route key={title} path= {path} element={element}/>
    });
    return(
        //obalime jednotlive routes samotnym routerem
        <BrowserRouter>
            <Routes>
                {routes}
            </Routes>
        </BrowserRouter>
    )
}
export default Router;

Tento router sice zafunguje, pokud bude naimportován, ale neumožňuje uživateli navigaci konvenčním způsobem - tedy klikáním do nějakého menu. Je nutné tedy router ještě obalit nějakým vhodným HTML elementem, například unordered listem.
Následující code snippet vytváří menu pro uživatele.

 
import React from "react" 
import {pagesRefs} from "../pages/pagesData" 
import {RouterRefs} from "../lib/global/datatypes" 
import "../assets/MenuNavbar.css" 

//wrapper pro klienta, aby mohl routovat bez primeho psani do url
//navbar zabali router
const MenuNavbar = () => {
    let key: number = 0;
    const items = pagesRefs.map(({path,name}: RouterRefs)=>{
    return <li key={key++}><a href={path}> {name}</a> </li>
            });

    return(
        <div className={"navigation-menu"}>
            <ul id={"nav-menu"}>
                {items}
            </ul>
        </div>
    )
};

export default MenuNavbar;