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>