Lahendatud: parameetrite lisamine url react ruuterile

Peamine probleem, mis on seotud URL React Routeri parameetrite lisamisega, on see, et kasutajad saavad parameetreid hõlpsasti manipuleerida. See võib põhjustada turvaprobleeme, kuna pahatahtlikud kasutajad võivad potentsiaalselt kasutada parameetreid volitamata ressurssidele või andmetele juurdepääsu saamiseks. Lisaks, kui parameetrite väärtused pole õigesti kinnitatud, võib see põhjustada rakenduses ootamatu käitumise. Lõpuks, kui lisatakse liiga palju parameetreid, võib see URL-i keerukuse suurenemise tõttu põhjustada jõudlusprobleeme.

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. importida { BrowserRouter as Router, Route, Link, useParams } jaotisest "react-router-dom";
// See impordib react-router-dom teegist komponendid, mida selles koodis kasutatakse.

2. // See loob ruuteri komponendi, mis haldab navigeerimist erinevate marsruutide vahel.

3. // See loob marsruudi dünaamilise parameetriga 'kasutajanimi'.

4. // See muudab kasutaja komponendi, kui see marsruut on sobitatud.

5. John // See loob lingi marsruudile /user/john, mis klõpsamisel renderdab kasutaja komponendi, mille kasutajanime parameetriks on 'john'.

6. function User() { //See on funktsionaalne komponent, mis võtab kasutajanime argumendina ja muudab selle div-märgendite sees, kui seda kutsutakse selle kohal asuval lingil klõpsates.

7. olgu { kasutajanimi } = useParams(); //See kasutab destruktureerimist, et saada juurdepääs kasutajanimele rakendusest useParams().

8. tagasi (

); //See tagastab elemendi div, mis sisaldab mis tahes väärtust, mis on antud kasutajanimele, mis antud juhul oleks 'john'.

Mis on Reacti ruuter

React Router on Reacti rakenduste marsruutimisteek. See pakub põhikomponente ja funktsioone, mis on vajalikud ühelehelise rakenduse (SPA) loomiseks koos erinevate lehtede vahel navigeerimisega. See võimaldab arendajatel määratleda marsruute, mis on rakenduses konkreetsete komponentidega kaardistatud teed. React Router pakub ka selliseid funktsioone nagu ümbersuunamised, dünaamiline marsruudi sobitamine ja päringu parameetrid.

URL-i parameetrid

React Routeri URL-i parameetrid võimaldavad arendajatel edastada dünaamilisi andmeid URL-ist Reacti komponentidele. See on kasulik dünaamiliste marsruutide loomiseks, mida saab kasutada URL-is edastatud parameetrite alusel erineva sisu kuvamiseks. Näiteks marsruuti nagu „/kasutaja/:id” saab kasutada kasutajaprofiili lehe kuvamiseks URL-is edastatud ID-parameetriga. Parameetreid saab kasutada ka andmete filtreerimiseks või muudeks toiminguteks, mis nõuavad URL-ist dünaamilisi andmeid.

Kuidas lisada Reactis URL-ile parameetrit

React Routeri URL-ile parameetrite lisamine toimub objekti "params" abil. See objekt võimaldab teil sisestada võtme-väärtuse paare, mis lisatakse URL-ile. Parameetri lisamiseks lisage see lihtsalt parameetrite objektile järgmiselt:

const params = { param1: 'väärtus1', param2: 'väärtus2' };

Seejärel saate marsruudi loomisel argumendina sisestada objekti params järgmiselt:

Seejärel lisatakse parameetrid sellele marsruudile navigeerimisel URL-ile.