Het grootste probleem met betrekking tot URL-parameters van React Router is dat ze moeilijk te gebruiken zijn in dynamische routes. Dit komt omdat de URL-parameters statisch zijn en niet kunnen worden gewijzigd nadat de route is gemaakt. Dit betekent dat als een gebruiker een andere pagina met andere parameters moet openen, hij voor elke parametercombinatie een nieuwe route moet maken. Bovendien kan het bij het gebruik van URL-parameters moeilijk zijn om alle mogelijke combinaties bij te houden en ervoor te zorgen dat elke combinatie correct wordt verwerkt door de router.
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.
);
};
Deze code stelt een React Router in om een pagina met een gebruikersnaam van de URL weer te geven.
1. De eerste regel importeert componenten uit de React Router DOM-bibliotheek.
2. De App-functie retourneert de Router-component met daarin een Route-component, die specificeert dat elke URL die begint met "/user/" de UserPage-component moet weergeven.
3. De functie UserPage gebruikt useParams() om de gebruikersnaam uit de URL te halen en geeft vervolgens een begroeting weer met die gebruikersnaam.
URL-parameters
URL-parameters in React Router zijn stukjes gegevens die als onderdeel van de URL aan een route worden doorgegeven. Ze stellen ontwikkelaars in staat dynamische informatie door te geven aan een route, zoals een ID of queryreeks. Dit kan worden gebruikt om dynamische routes te maken die kunnen worden gebruikt voor zaken als het weergeven van specifieke items uit een database of het filteren van inhoud op basis van gebruikersinvoer. React Router biedt tools voor toegang tot en manipulatie van URL-parameters, waardoor het gemakkelijk is om ze in uw toepassing te gebruiken.
Hoe krijg je de URL-parameters van een route in React
In React Router hebt u toegang tot de URL-parameters vanaf een route met behulp van de useParams-hook. Deze hook retourneert een object dat sleutel-waardeparen van de URL-parameters bevat. Als uw route bijvoorbeeld /user/:id is, kunt u toegang krijgen tot de parameter id met useParams().id.
