Løst: legger til parametere til url-reagerruteren

Hovedproblemet knyttet til å legge til parametere til URL React Router er at parameterne enkelt kan manipuleres av brukere. Dette kan føre til sikkerhetsproblemer, ettersom ondsinnede brukere potensielt kan bruke parameterne for å få tilgang til uautoriserte ressurser eller data. I tillegg, hvis parameterverdiene ikke er riktig validert, kan det føre til uventet oppførsel i applikasjonen. Til slutt, hvis for mange parametere legges til, kan det føre til ytelsesproblemer på grunn av økt kompleksitet til nettadressen.

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. importer { BrowserRouter as Router, Route, Link, useParams } fra "react-router-dom";
// Dette importerer komponentene fra react-router-dom-biblioteket som skal brukes i denne koden.

2. // Dette lager en ruterkomponent som skal håndtere navigering mellom ulike ruter.

3. // Dette lager en rute med en dynamisk parameter "brukernavn".

4. // Dette gjengir brukerkomponenten når denne ruten matches.

5. John // Dette oppretter en lenke til /user/john-ruten som vil gjengi brukerkomponenten med 'john' som brukernavnsparameter når den klikkes på.

6. function User() { //Dette er en funksjonell komponent som tar inn brukernavn som et argument og gjengir det inne i div-tagger når det kalles på ved å klikke på koblingen over den.

7. la { brukernavn } = useParams(); //Dette bruker destrukturering for å få tilgang til brukernavn fra useParams().

8. retur (

); //Dette returnerer et div-element som inneholder den verdien som ble sendt inn i brukernavnet, som i dette tilfellet ville være 'john'.

Hva er React-ruteren

React Router er et rutebibliotek for React-applikasjoner. Den gir kjernekomponentene og funksjonene som er nødvendige for å lage en enkeltsideapplikasjon (SPA) med navigering mellom forskjellige sider. Det lar utviklere definere ruter, som er stier som kartlegges til spesifikke komponenter i applikasjonen. React Router tilbyr også funksjoner som omdirigeringer, dynamisk rutematching og spørringsparametere.

Parametere til URL

Parametere til URL i React Router lar utviklere overføre dynamiske data fra URL-en til React-komponentene. Dette er nyttig for å lage dynamiske ruter som kan brukes til å vise forskjellig innhold basert på parameterne som sendes i URL-en. For eksempel kan en rute som "/user/:id" brukes til å vise en brukerprofilside med en id-parameter sendt i URL-en. Parametre kan også brukes til å filtrere data eller andre operasjoner som krever dynamiske data fra URL-en.

Hvordan legger jeg til en parameter til en URL i React

Å legge til parametere til en URL i React Router gjøres ved å bruke "params"-objektet. Dette objektet lar deg sende inn nøkkelverdi-par som vil bli lagt til URL-en. For å legge til en parameter, legg den til i params-objektet slik:

const params = { param1: 'verdi1', param2: 'verdi2' };

Deretter, når du oppretter ruten din, kan du sende inn params-objektet som et argument slik:

Parametrene vil deretter bli lagt til URL-en når du navigerer til denne ruten.