Riješeno: dodavanje parametara usmjerivaču url reakcije

Glavni problem vezan uz dodavanje parametara u URL React Router je taj što korisnici mogu lako manipulirati parametrima. To može dovesti do sigurnosnih problema jer zlonamjerni korisnici potencijalno mogu koristiti parametre za pristup neovlaštenim resursima ili podacima. Osim toga, ako vrijednosti parametara nisu ispravno potvrđene, to može dovesti do neočekivanog ponašanja u aplikaciji. Konačno, ako se doda previše parametara, to može uzrokovati probleme s izvedbom zbog povećane složenosti URL-a.

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 } from “react-router-dom”;
// Ovo uvozi komponente iz biblioteke react-router-dom koje će se koristiti u ovom kodu.

2. // Ovo stvara komponentu usmjerivača koja će upravljati navigacijom između različitih ruta.

3. // Ovo stvara rutu s dinamičkim parametrom 'username'.

4. // Ovo prikazuje korisničku komponentu kada se ova ruta podudara.

5. John // Ovo stvara vezu na rutu /user/john koja će prikazati korisničku komponentu s 'john' kao parametrom korisničkog imena kada se na nju klikne.

6. function User() { //Ovo je funkcionalna komponenta koja uzima korisničko ime kao argument i prikazuje ga unutar div oznaka kada se pozove klikom na vezu iznad nje.

7. neka { korisničko ime } = useParams(); //Ovo koristi destrukturiranje za dobivanje pristupa korisničkom imenu iz useParams().

8. povratak (

); //Ovo vraća element div koji sadrži bilo koju vrijednost koja je proslijeđena u korisničko ime koje bi u ovom slučaju bilo 'john'.

Što je React router

React Router je biblioteka usmjeravanja za React aplikacije. Pruža osnovne komponente i funkcije potrebne za stvaranje jednostraničke aplikacije (SPA) s navigacijom između različitih stranica. Omogućuje programerima da definiraju rute, koje su staze koje se preslikavaju na određene komponente u aplikaciji. React Router također nudi značajke kao što su preusmjeravanja, dinamičko podudaranje ruta i parametri upita.

Parametri za URL

Parametri URL-a u React Routeru omogućuju programerima da proslijede dinamičke podatke s URL-a React komponentama. Ovo je korisno za stvaranje dinamičkih ruta koje se mogu koristiti za prikazivanje različitih sadržaja na temelju parametara proslijeđenih u URL-u. Na primjer, ruta kao što je “/user/:id” može se koristiti za prikaz stranice korisničkog profila s parametrom id-a proslijeđenim u URL-u. Parametri se također mogu koristiti za filtriranje podataka ili druge operacije koje zahtijevaju dinamičke podatke iz URL-a.

Kako mogu dodati parametar URL-u u Reactu

Dodavanje parametara URL-u u React Routeru vrši se pomoću objekta “params”. Ovaj objekt vam omogućuje prosljeđivanje parova ključ-vrijednost koji će biti dodani u URL. Da biste dodali parametar, jednostavno ga dodajte objektu params ovako:

const params = { param1: 'vrijednost1', param2: 'vrijednost2' };

Zatim, kada kreirate svoju rutu, možete proslijediti params objekt kao argument ovako:

Parametri će tada biti dodani URL-u prilikom navigacije ovom rutom.