Vyriešené: pridanie parametrov do smerovača na reakciu na adresu URL

Hlavným problémom súvisiacim s pridávaním parametrov do URL React Router je to, že s parametrami môžu používatelia jednoducho manipulovať. To môže viesť k problémom so zabezpečením, pretože používatelia so zlými úmyslami by mohli potenciálne použiť parametre na získanie prístupu k neoprávneným zdrojom alebo údajom. Okrem toho, ak hodnoty parametrov nie sú správne overené, môže to viesť k neočakávanému správaniu aplikácie. Nakoniec, ak pridáte príliš veľa parametrov, môže to spôsobiť problémy s výkonom v dôsledku zvýšenej zložitosti adresy URL.

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

 <Router>
    <Route path="/user/:username">
      <User />
    </Route>

    <Link to="/user/john">John</Link>

    function User() {
      let { username } = useParams();

      return (
        <div>{username}</div>   // renders 'john' when the link is clicked. 
      );  
    }    

 </Router>

1. importujte { BrowserRouter ako Router, Route, Link, useParams } z “react-router-dom”;
// Toto importuje komponenty z knižnice respond-router-dom, ktoré budú použité v tomto kóde.

2. // Toto vytvorí komponent smerovača, ktorý bude spracovávať navigáciu medzi rôznymi trasami.

3. // Toto vytvorí trasu s dynamickým parametrom 'username'.

4. // Toto vykreslí užívateľský komponent, keď je táto trasa zhodná.

5. John // Toto vytvorí odkaz na cestu /user/john, ktorá po kliknutí vykreslí komponent User s 'john' ako parametrom užívateľského mena.

6. function User() { //Toto je funkčný komponent, ktorý berie ako argument používateľské meno a zobrazuje ho v tagoch ​​div, keď je vyvolaný kliknutím na odkaz nad ním.

7. nech { meno používateľa } = useParams(); //Toto používa deštrukciu na získanie prístupu k užívateľskému menu z useParams().

8. vrátiť (

); //Vráti prvok div obsahujúci akúkoľvek hodnotu, ktorá bola odovzdaná do používateľského mena, čo by v tomto prípade bolo 'john'.

Čo je React router

React Router je smerovacia knižnica pre aplikácie React. Poskytuje základné komponenty a funkcie potrebné na vytvorenie jednostránkovej aplikácie (SPA) s navigáciou medzi rôznymi stránkami. Umožňuje vývojárom definovať trasy, čo sú cesty, ktoré sa mapujú na konkrétne komponenty v aplikácii. React Router tiež poskytuje funkcie, ako sú presmerovania, dynamické priraďovanie trás a parametre dotazov.

Parametre na URL

Parametre URL v React Router umožňujú vývojárom odovzdávať dynamické dáta z URL do komponentov React. Je to užitočné pri vytváraní dynamických trás, ktoré možno použiť na zobrazenie rôzneho obsahu na základe parametrov odovzdaných v adrese URL. Napríklad cesta ako „/user/:id“ sa môže použiť na zobrazenie stránky profilu používateľa s parametrom id odovzdaným v adrese URL. Parametre možno použiť aj na filtrovanie údajov alebo iné operácie, ktoré vyžadujú dynamické údaje z adresy URL.

Ako pridám parameter do URL v React

Pridávanie parametrov do URL v React Router sa vykonáva pomocou objektu „params“. Tento objekt vám umožňuje odovzdať páry kľúč – hodnota, ktoré sa pridajú do adresy URL. Ak chcete pridať parameter, jednoducho ho pridajte do objektu params takto:

const params = { param1: 'hodnota1', param2: 'hodnota2' };

Potom pri vytváraní trasy môžete zadať objekt params ako argument, ako je tento:

Parametre sa potom pridajú k URL pri navigácii na túto trasu.