Projekt

Obecné

Profil

Historie

React router » Historie » Revize 4

Revize 3 (Jiří Trefil, 2023-03-26 21:01) → Revize 4/5 (Jiří Trefil, 2023-03-26 21:01) 

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>