Projekt

Obecné

Profil

Historie

React router » Historie » Revize 2

Revize 1 (Jiří Trefil, 2023-03-26 19:43) → Revize 2/5 (Jiří Trefil, 2023-03-26 20:59) 

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>