Išspręsta: parametrų pridėjimas prie url react maršrutizatoriaus

Pagrindinė problema, susijusi su parametrų įtraukimu į URL React Router, yra ta, kad vartotojai gali lengvai manipuliuoti parametrais. Dėl to gali kilti saugumo problemų, nes kenkėjiški vartotojai gali naudoti parametrus, kad gautų prieigą prie neteisėtų išteklių ar duomenų. Be to, jei parametrų reikšmės nėra tinkamai patvirtintos, tai gali sukelti netikėtą programos veikimą. Galiausiai, jei pridėta per daug parametrų, dėl padidėjusio URL sudėtingumo gali kilti našumo problemų.

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. importuoti { BrowserRouter as Router, Route, Link, useParams } iš „react-router-dom“;
// Taip importuojami komponentai iš react-router-dom bibliotekos, kurie bus naudojami šiame kode.

2. // Tai sukuria maršrutizatoriaus komponentą, kuris tvarkys navigaciją tarp skirtingų maršrutų.

3. // Taip sukuriamas maršrutas su dinaminiu parametru „vartotojo vardas“.

4. // Tai pateikia vartotojo komponentą, kai šis maršrutas suderinamas.

5. John // Taip sukuriama nuoroda į /user/john maršrutą, kuris paspaudus vartotojo komponentą pateiks vartotojo vardo parametrą „john“.

6. function User() { //Tai funkcinis komponentas, kuris priima vartotojo vardą kaip argumentą ir pateikia jį div žymų viduje, kai iškviečiama spustelėjus virš jo esančią nuorodą .

7. tegul { vartotojo vardas } = useParams(); // Tam naudojamas naikinimas, kad gautų prieigą prie vartotojo vardo iš useParams().

8. grąžinti (

); //Tai grąžina elementą div, kuriame yra bet kokia reikšmė, kuri buvo perduota į vartotojo vardą, kuris šiuo atveju būtų „john“.

Kas yra React maršrutizatorius

„React Router“ yra „React“ programų maršruto parinkimo biblioteka. Jame pateikiami pagrindiniai komponentai ir funkcijos, būtinos norint sukurti vieno puslapio taikomąją programą (SPA) su naršymu tarp skirtingų puslapių. Tai leidžia kūrėjams apibrėžti maršrutus, kurie yra maršrutai, susieti su konkrečiais programos komponentais. „React Router“ taip pat teikia tokias funkcijas kaip peradresavimai, dinaminis maršruto atitikimas ir užklausos parametrai.

URL parametrai

„React Router“ URL parametrai leidžia kūrėjams perduoti dinaminius duomenis iš URL į „React“ komponentus. Tai naudinga kuriant dinaminius maršrutus, kurie gali būti naudojami rodyti skirtingą turinį pagal URL perduodamus parametrus. Pavyzdžiui, maršrutas, pvz., „/user/:id“, gali būti naudojamas vartotojo profilio puslapiui rodyti su id parametru, perduotu URL. Parametrai taip pat gali būti naudojami duomenims filtruoti ar kitoms operacijoms, kurioms reikia dinaminių duomenų iš URL.

Kaip „React“ pridėti parametrą prie URL

Parametrai pridedami prie URL „React Router“ naudojant objektą „params“. Šis objektas leidžia perduoti rakto-reikšmių poras, kurios bus pridėtos prie URL. Norėdami pridėti parametrą, tiesiog pridėkite jį prie parametrų objekto taip:

const params = { param1: 'value1', param2: 'value2'};

Tada kurdami maršrutą galite pateikti parametrų objektą kaip argumentą, pavyzdžiui:

Parametrai bus pridėti prie URL, kai naviguosite į šį maršrutą.