Rešeno: dodajanje parametrov usmerjevalniku odziva na url

Glavna težava, povezana z dodajanjem parametrov v URL React Router, je, da lahko uporabniki zlahka manipulirajo s parametri. To lahko privede do varnostnih težav, saj lahko zlonamerni uporabniki potencialno uporabijo parametre za dostop do nepooblaščenih virov ali podatkov. Poleg tega, če vrednosti parametrov niso pravilno potrjene, lahko povzroči nepričakovano vedenje v aplikaciji. Nazadnje, če je dodanih preveč parametrov, lahko povzroči težave z zmogljivostjo zaradi povečane zapletenosti URL-ja.

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. uvozite { BrowserRouter kot Router, Route, Link, useParams } iz “react-router-dom”;
// To uvozi komponente iz knjižnice react-router-dom, ki bodo uporabljene v tej kodi.

2. // To ustvari komponento usmerjevalnika, ki bo upravljala navigacijo med različnimi potmi.

3. // To ustvari pot z dinamičnim parametrom 'uporabniško ime'.

4. // To upodobi uporabniško komponento, ko se ta pot ujema.

5. John // To ustvari povezavo do poti /user/john, ki ob kliku upodobi uporabniško komponento z 'john' kot parametrom uporabniškega imena.

6. function User() { //To je funkcionalna komponenta, ki vzame uporabniško ime kot argument in ga upodablja znotraj oznak div, ko je priklicana s klikom na povezavo nad njo.

7. let { uporabniško ime } = useParams(); //To uporablja destrukturiranje za dostop do uporabniškega imena iz useParams().

8. vrnitev (

); //To vrne element div, ki vsebuje katero koli vrednost, ki je bila posredovana v uporabniško ime, ki bi bilo v tem primeru 'john'.

Kaj je usmerjevalnik React

React Router je usmerjevalna knjižnica za aplikacije React. Zagotavlja osnovne komponente in funkcije, potrebne za ustvarjanje enostranske aplikacije (SPA) z navigacijo med različnimi stranmi. Razvijalcem omogoča, da definirajo poti, ki so poti, ki se preslikajo na določene komponente v aplikaciji. React Router ponuja tudi funkcije, kot so preusmeritve, dinamično ujemanje poti in parametri poizvedbe.

Parametri za URL

Parametri za URL v usmerjevalniku React omogočajo razvijalcem, da posredujejo dinamične podatke iz URL-ja komponentam React. To je uporabno za ustvarjanje dinamičnih poti, ki jih je mogoče uporabiti za prikaz različnih vsebin na podlagi parametrov, posredovanih v URL-ju. Na primer, pot, kot je »/user/:id«, bi lahko uporabili za prikaz strani s profilom uporabnika s parametrom ID-ja, posredovanim v URL-ju. Parametre je mogoče uporabiti tudi za filtriranje podatkov ali druge operacije, ki zahtevajo dinamične podatke iz URL-ja.

Kako dodam parameter URL-ju v Reactu

Dodajanje parametrov URL-ju v usmerjevalniku React Router se izvede z uporabo predmeta "params". Ta objekt vam omogoča posredovanje parov ključ-vrednost, ki bodo dodani URL-ju. Če želite dodati parameter, ga preprosto dodajte objektu params takole:

const params = {param1: 'vrednost1', param2: 'vrednost2' };

Potem, ko ustvarjate svojo pot, lahko posredujete objekt params kot argument tako:

Parametri bodo nato dodani URL-ju pri navigaciji do te poti.