Hovedproblemet knyttet til React Router URL-parametere er at de kan være vanskelige å bruke i dynamiske ruter. Dette er fordi URL-paramene er statiske og ikke kan endres etter at ruten er opprettet. Dette betyr at hvis en bruker trenger tilgang til en annen side med forskjellige parametere, må de opprette en ny rute for hver parameterkombinasjon. I tillegg, når du bruker URL-parametere, kan det være vanskelig å holde styr på alle mulige kombinasjoner og sørge for at hver enkelt håndteres riktig av ruteren.
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 koden setter opp en React Router for å gjengi en side med et brukernavn fra URL-en.
1. Den første linjen importerer komponenter fra React Router DOM-biblioteket.
2. App-funksjonen returnerer ruterkomponenten med en rutekomponent inne i den, som spesifiserer at enhver URL som begynner med "/user/" skal gjengi UserPage-komponenten.
3. UserPage-funksjonen bruker useParams() for å hente brukernavnet fra URL-en og gjengir deretter en hilsen med det brukernavnet.
URL-parametere
URL-parametere i React Router er databiter som sendes til en rute som en del av URL-en. De lar utviklere sende dynamisk informasjon til en rute, for eksempel en ID eller spørringsstreng. Dette kan brukes til å lage dynamiske ruter som kan brukes til ting som å vise bestemte elementer fra en database eller filtrere innhold basert på brukerinndata. React Router gir verktøy for å få tilgang til og manipulere URL-parametere, noe som gjør det enkelt å bruke dem i applikasjonen din.
Hvordan får du URL-paramene fra en rute i React
I React Router kan du få tilgang til URL-paramene fra en rute ved å bruke useParams-kroken. Denne kroken returnerer et objekt som inneholder nøkkelverdi-par av URL-parametere. For eksempel, hvis ruten din er /user/:id, kan du få tilgang til id-parameteren med useParams().id.
