ASWI - Pokročilé softwarové inženýrství » ASWI 2023 » Vylepšení funkcí a rozhraní frameworku SPADe (Pícha) - PRO_grammers.

h1. 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.

<pre> <code class="react">

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;

</pre></code>

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.

<pre> <code class="react">

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;

</pre> </code>