Rezolvat: adăugarea parametrilor la routerul de reacție url

Principala problemă legată de adăugarea parametrilor la URL React Router este că parametrii pot fi manipulați cu ușurință de către utilizatori. Acest lucru poate duce la probleme de securitate, deoarece utilizatorii rău intenționați ar putea folosi parametrii pentru a obține acces la resurse sau date neautorizate. În plus, dacă valorile parametrilor nu sunt validate corespunzător, ar putea duce la un comportament neașteptat în aplicație. În cele din urmă, dacă sunt adăugați prea mulți parametri, poate cauza probleme de performanță din cauza complexității crescute a adresei 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. importați { BrowserRouter ca Router, Route, Link, useParams } din „react-router-dom”;
// Aceasta importă componentele din biblioteca react-router-dom care vor fi folosite în acest cod.

2. // Aceasta creează o componentă de router care se va ocupa de navigarea între diferite rute.

3. // Aceasta creează o rută cu un parametru dinamic „nume utilizator”.

4. // Aceasta redă componenta User atunci când această rută este potrivită.

5. John // Aceasta creează o legătură către ruta /user/john care va reda componenta User cu „john” ca parametru de nume de utilizator atunci când se face clic pe.

6. function User() { //Aceasta este o componentă funcțională care ia numele de utilizator ca argument și îl redă în interiorul etichetelor div atunci când este apelat făcând clic pe Link-ul de deasupra acestuia.

7. let { username } = useParams(); //Acest lucru folosește destructurarea pentru a obține acces la numele de utilizator de la useParams().

8. întoarcere (

); //Aceasta returnează un element div care conține orice valoare a fost trecută în numele de utilizator, care în acest caz ar fi „john”.

Ce este routerul React

React Router este o bibliotecă de rutare pentru aplicațiile React. Acesta oferă componentele și funcțiile de bază necesare pentru a crea o aplicație cu o singură pagină (SPA) cu navigare între diferite pagini. Permite dezvoltatorilor să definească rute, care sunt căi care se mapează la anumite componente din aplicație. React Router oferă, de asemenea, funcții precum redirecționări, potrivire dinamică a rutei și parametri de interogare.

Parametrii către URL

Parametrii URL-ului din React Router permit dezvoltatorilor să transmită date dinamice de la URL la componentele React. Acest lucru este util pentru a crea rute dinamice care pot fi folosite pentru afișarea conținutului diferit pe baza parametrilor trecuți în URL. De exemplu, o rută precum „/user/:id” ar putea fi utilizată pentru a afișa o pagină de profil de utilizator cu un parametru ID transmis în adresa URL. Parametrii pot fi utilizați și pentru filtrarea datelor sau a altor operațiuni care necesită date dinamice de la adresa URL.

Cum adaug un parametru la o adresă URL în React

Adăugarea de parametri la o adresă URL în React Router se face folosind obiectul „params”. Acest obiect vă permite să treceți perechi cheie-valoare care vor fi adăugate la adresa URL. Pentru a adăuga un parametru, adăugați-l la obiectul params astfel:

const params = { param1: 'valoare1', param2: 'valoare2'};

Apoi, atunci când vă creați traseul, puteți trece obiectul params ca argument astfel:

Parametrii vor fi apoi adăugați la adresa URL atunci când navigați către această rută.