Det største problem relateret til React Router URL-parametre er, at de kan være svære at bruge i dynamiske ruter. Dette skyldes, at URL-parametrene er statiske og ikke kan ændres, efter at ruten er blevet oprettet. Dette betyder, at hvis en bruger skal have adgang til en anden side med forskellige parametre, skal de oprette en ny rute for hver parameterkombination. Når du bruger URL-parametre, kan det desuden være svært at holde styr på alle mulige kombinationer og sikre dig, at hver enkelt håndteres korrekt af routeren.
import {
BrowserRouter as Router,
Route,
Link,
useParams
} from "react-router-dom";
const App = () => {
return (
<Router>
<div>
<Route path="/user/:username" component={UserPage} />
</div>
</Router>
);
};
const UserPage = () => {
let { username } = useParams(); // Get the username from the URL.
return (
<div>Hello, {username}!</div> // Render a greeting with the username.
);
};
Denne kode opsætter en React Router til at gengive en side med et brugernavn fra URL'en.
1. Den første linje importerer komponenter fra React Router DOM-biblioteket.
2. App-funktionen returnerer routerkomponenten med en rutekomponent inde i den, som angiver, at enhver URL, der begynder med "/user/", skal gengive UserPage-komponenten.
3. UserPage-funktionen bruger useParams() til at hente brugernavnet fra URL'en og gengiver derefter en hilsen med det brugernavn.
URL-parametre
URL-parametre i React Router er stykker data, der sendes til en rute som en del af URL'en. De giver udviklere mulighed for at videregive dynamisk information til en rute, såsom et id eller en forespørgselsstreng. Dette kan bruges til at skabe dynamiske ruter, der kan bruges til ting som at vise specifikke elementer fra en database eller filtrere indhold baseret på brugerinput. React Router giver værktøjer til at få adgang til og manipulere URL-parametre, hvilket gør det nemt at bruge dem i din applikation.
Hvordan får du URL-parametrene fra en rute i React
I React Router kan du få adgang til URL-parametrene fra en rute ved hjælp af useParams-krogen. Denne hook returnerer et objekt, der indeholder nøgle-værdi-par af URL-parametrene. For eksempel, hvis din rute er /user/:id, kan du få adgang til id-parameteren med useParams().id.
