Løst: tilføjelse af parametre til url-reager-router

Hovedproblemet i forbindelse med tilføjelse af parametre til URL React Router er, at parametrene nemt kan manipuleres af brugere. Dette kan føre til sikkerhedsproblemer, da ondsindede brugere potentielt kan bruge parametrene til at få adgang til uautoriserede ressourcer eller data. Derudover, hvis parameterværdierne ikke er korrekt valideret, kan det føre til uventet adfærd i applikationen. Endelig, hvis der tilføjes for mange parametre, kan det forårsage ydeevneproblemer på grund af URL'ens øgede kompleksitet.

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 som router, rute, link, useParams } fra "react-router-dom";
// Dette importerer komponenterne fra react-router-dom-biblioteket, der vil blive brugt i denne kode.

2. // Dette skaber en router-komponent, der vil håndtere navigation mellem forskellige ruter.

3. // Dette opretter en rute med en dynamisk parameter 'brugernavn'.

4. // Dette gengiver brugerkomponenten, når denne rute matches.

5. John // Dette skaber et link til /user/john-ruten, som vil gengive brugerkomponenten med 'john' som brugernavnsparameter, når der klikkes på.

6. function User() { //Dette er en funktionel komponent, der tager brugernavn ind som et argument og gengiver det inde i div-tags, når det kaldes på ved at klikke på linket over det.

7. lad { brugernavn } = useParams(); //Dette bruger destrukturering for at få adgang til brugernavn fra useParams().

8. returnere (

); //Dette returnerer et div-element, der indeholder den værdi, der blev sendt til brugernavnet, som i dette tilfælde ville være 'john'.

Hvad er React router

React Router er et routing-bibliotek til React-applikationer. Det giver de kernekomponenter og funktioner, der er nødvendige for at skabe en enkeltsidet applikation (SPA) med navigation mellem forskellige sider. Det giver udviklere mulighed for at definere ruter, som er stier, der knytter sig til specifikke komponenter i applikationen. React Router tilbyder også funktioner såsom omdirigeringer, dynamisk rutematchning og forespørgselsparametre.

Parametre til URL

Parametre til URL i React Router giver udviklere mulighed for at videregive dynamiske data fra URL'en til React-komponenterne. Dette er nyttigt til at skabe dynamiske ruter, der kan bruges til at vise forskelligt indhold baseret på de parametre, der sendes i URL'en. For eksempel kan en rute som "/user/:id" bruges til at vise en brugerprofilside med en id-parameter, der er sendt i URL'en. Parametre kan også bruges til at filtrere data eller andre operationer, der kræver dynamiske data fra URL'en.

Hvordan tilføjer jeg en parameter til en URL i React

Tilføjelse af parametre til en URL i React Router sker ved hjælp af "params" objektet. Dette objekt giver dig mulighed for at indsætte nøgleværdi-par, som vil blive tilføjet til URL'en. For at tilføje en parameter skal du blot tilføje den til params-objektet sådan:

const params = { param1: 'værdi1', param2: 'værdi2' };

Derefter, når du opretter din rute, kan du sende params-objektet ind som et argument som sådan:

Parametrene vil derefter blive tilføjet til URL'en, når du navigerer til denne rute.