Vyriešené: reagujte na parametre adresy URL smerovača

Hlavným problémom súvisiacim s parametrami URL React Router je to, že ich použitie v dynamických smeroch môže byť náročné. Dôvodom je, že parametre adresy URL sú statické a po vytvorení trasy sa nedajú zmeniť. To znamená, že ak používateľ potrebuje prístup na inú stránku s rôznymi parametrami, bude musieť vytvoriť novú cestu pre každú kombináciu parametrov. Okrem toho pri používaní parametrov adresy URL môže byť ťažké sledovať všetky možné kombinácie a uistiť sa, že každú z nich router správne spracuje.

import {
  BrowserRouter as Router,
  Route,
  Link,
  useParams
} from "react-router-dom";

 const App = () => {

   return (
     <Router>
       <div>

         <Route path="/user/:username" component={UserPage} />

       </div>
     </Router>
   );

 };

 const UserPage = () => {

   let { username } = useParams(); // Get the username from the URL.

   return (
     <div>Hello, {username}!</div> // Render a greeting with the username. 
   );

 };

Tento kód nastavuje smerovač React na vykreslenie stránky s používateľským menom z adresy URL.

1. Prvý riadok importuje komponenty z knižnice React Router DOM.
2. Funkcia App vracia komponent Router s komponentom Route vo vnútri, ktorý určuje, že každá URL začínajúca na „/user/“ by mala vykresliť komponent UserPage.
3. Funkcia UserPage používa useParams() na získanie používateľského mena z adresy URL a potom pomocou tohto používateľského mena vykreslí pozdrav.

parametre adresy URL

Parametre URL v React Router sú časti údajov, ktoré sa prenášajú do trasy ako súčasť URL. Umožňujú vývojárom odovzdať trase dynamické informácie, ako napríklad ID alebo reťazec dopytu. Dá sa to použiť na vytváranie dynamických trás, ktoré možno použiť na veci, ako je zobrazovanie konkrétnych položiek z databázy alebo filtrovanie obsahu na základe vstupu používateľa. React Router poskytuje nástroje na prístup a manipuláciu s parametrami URL, čo uľahčuje ich používanie vo vašej aplikácii.

Ako získate parametre URL z trasy v Reacte

V React Router máte prístup k parametrom URL z trasy pomocou háku useParams. Tento hák vracia objekt obsahujúci páry kľúč – hodnota parametrov adresy URL. Napríklad, ak je vaša trasa /user/:id, môžete pristupovať k parametru id pomocou useParams().id.