Löst: lägga till parametrar till url react router

Det största problemet med att lägga till parametrar till URL React Router är att parametrarna lätt kan manipuleras av användare. Detta kan leda till säkerhetsproblem, eftersom skadliga användare potentiellt kan använda parametrarna för att få tillgång till obehöriga resurser eller data. Om parametervärdena inte är korrekt validerade kan det dessutom leda till oväntat beteende i programmet. Slutligen, om för många parametrar läggs till kan det orsaka prestandaproblem på grund av webbadressens ökade komplexitet.

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. importera { BrowserRouter som Router, Route, Link, useParams } från "react-router-dom";
// Detta importerar komponenterna från react-router-dom-biblioteket som kommer att användas i den här koden.

2. // Detta skapar en routerkomponent som kommer att hantera navigering mellan olika rutter.

3. // Detta skapar en rutt med en dynamisk parameter "användarnamn".

4. // Detta återger User-komponenten när denna rutt matchas.

5. John // Detta skapar en länk till rutten /user/john som återger användarkomponenten med 'john' som användarnamnsparameter när den klickas på.

6. function User() { //Detta är en funktionell komponent som tar in användarnamn som ett argument och återger det inuti div-taggar när de anropas genom att klicka på länken ovanför den.

7. låt { användarnamn } = useParams(); //Detta använder destrukturering för att få åtkomst till användarnamn från useParams().

8. returnera (

); //Detta returnerar ett div-element som innehåller det värde som skickades till användarnamnet, vilket i det här fallet skulle vara 'john'.

Vad är React-router

React Router är ett routingbibliotek för React-applikationer. Den tillhandahåller de kärnkomponenter och funktioner som krävs för att skapa en ensidig applikation (SPA) med navigering mellan olika sidor. Det tillåter utvecklare att definiera rutter, vilket är vägar som mappar till specifika komponenter i applikationen. React Router tillhandahåller även funktioner som omdirigeringar, dynamisk ruttmatchning och frågeparametrar.

Parametrar till URL

Parametrar till URL i React Router tillåter utvecklare att skicka dynamisk data från URL:en till React-komponenterna. Detta är användbart för att skapa dynamiska rutter som kan användas för att visa olika innehåll baserat på parametrarna som skickas i URL:en. Till exempel kan en rutt som "/user/:id" användas för att visa en användarprofilsida med en id-parameter som skickas i URL:en. Parametrar kan också användas för att filtrera data eller andra operationer som kräver dynamisk data från URL:en.

Hur lägger jag till en parameter till en URL i React

Att lägga till parametrar till en URL i React Router görs med hjälp av objektet "params". Detta objekt låter dig skicka in nyckel-värdepar som kommer att läggas till i URL:en. För att lägga till en parameter, lägg till den i params-objektet så här:

const params = { param1: 'värde1', param2: 'värde2' };

Sedan, när du skapar din rutt, kan du skicka in params-objektet som ett argument så här:

Parametrarna kommer sedan att läggas till i URL:en när du navigerar till denna rutt.