Megoldva: paraméterek hozzáadása az url react routerhez

A paraméterek URL React Routerhez való hozzáadásával kapcsolatos fő probléma az, hogy a paramétereket a felhasználók könnyen módosíthatják. Ez biztonsági problémákhoz vezethet, mivel a rosszindulatú felhasználók potenciálisan felhasználhatják a paramétereket, hogy jogosulatlan erőforrásokhoz vagy adatokhoz férhessenek hozzá. Ezenkívül, ha a paraméterértékek nincsenek megfelelően érvényesítve, az váratlan viselkedéshez vezethet az alkalmazásban. Végül, ha túl sok paramétert ad hozzá, az teljesítményproblémákat okozhat az URL megnövekedett összetettsége miatt.

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. import { BrowserRouter as Router, Route, Link, useParams } a „react-router-dom” állományból;
// Ez importálja a kódban használt összetevőket a react-router-dom könyvtárból.

2. // Ezzel létrehoz egy útválasztó összetevőt, amely kezeli a navigációt a különböző útvonalak között.

3. // Ezzel létrehoz egy útvonalat a 'username' dinamikus paraméterrel.

4. // Ez megjeleníti a User komponenst, ha ez az útvonal illeszkedik.

5. John // Ez létrehoz egy hivatkozást a /user/john útvonalra, amely a User komponenst 'john' felhasználónév paraméterrel jeleníti meg, ha rákattint.

6. function User() { //Ez egy funkcionális komponens, amely a felhasználónevet argumentumként veszi fel, és a felette lévő hivatkozásra kattintva a div címkék belsejében jeleníti meg.

7. let { username } = useParams(); //Ez strukturálást használ, hogy hozzáférést kapjon a username-hez a useParams().

8. visszatérés (

); //Ez egy div elemet ad vissza, amely tartalmazza a felhasználónévbe adott értéket, amely ebben az esetben "john" lenne.

Mi az a React router

A React Router egy útválasztási könyvtár a React alkalmazásokhoz. Ez biztosítja az egyoldalas alkalmazás (SPA) létrehozásához szükséges alapvető összetevőket és funkciókat a különböző oldalak közötti navigációval. Lehetővé teszi a fejlesztők számára útvonalak meghatározását, amelyek olyan útvonalak, amelyek az alkalmazás meghatározott összetevőihez hozzárendelődnek. A React Router olyan funkciókat is biztosít, mint az átirányítások, a dinamikus útvonalillesztés és a lekérdezési paraméterek.

Az URL paraméterei

A React Router URL-címének paraméterei lehetővé teszik a fejlesztők számára, hogy dinamikus adatokat továbbítsanak az URL-ből a React összetevőknek. Ez hasznos dinamikus útvonalak létrehozásához, amelyek az URL-ben átadott paraméterek alapján különböző tartalmak megjelenítésére használhatók. Például egy „/user/:id” útvonalat lehet használni egy felhasználói profiloldal megjelenítésére az URL-ben átadott id paraméterrel. A paraméterek adatok szűrésére vagy egyéb olyan műveletekre is használhatók, amelyek dinamikus adatokat igényelnek az URL-ből.

Hogyan adhatok hozzá paramétert egy URL-hez a React alkalmazásban

A paraméterek hozzáadása egy URL-hez a React Routerben a „params” objektum használatával történik. Ez az objektum lehetővé teszi az URL-hez hozzáadott kulcs-érték párok átadását. Paraméter hozzáadásához egyszerűen adja hozzá a params objektumhoz, így:

const params = { param1: 'érték1', param2: 'érték2' };

Ezután az útvonal létrehozásakor átadhatja a params objektumot argumentumként, például:

A paraméterek ezután hozzáadódnak az URL-hez, amikor erre az útvonalra navigál.