Det största problemet med React Router URL-parametrar är att de kan vara svåra att använda i dynamiska rutter. Detta beror på att URL-parametrarna är statiska och inte kan ändras efter att rutten har skapats. Detta innebär att om en användare behöver komma åt en annan sida med olika parametrar, måste de skapa en ny rutt för varje parameterkombination. Dessutom, när du använder URL-parametrar, kan det vara svårt att hålla reda på alla möjliga kombinationer och se till att var och en hanteras korrekt av routern.
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.
);
};
Denna kod ställer in en React Router för att rendera en sida med ett användarnamn från URL:en.
1. Den första raden importerar komponenter från React Router DOM-biblioteket.
2. App-funktionen returnerar routerkomponenten med en ruttkomponent inuti den, som anger att alla webbadresser som börjar med "/user/" ska återge UserPage-komponenten.
3. UserPage-funktionen använder useParams() för att hämta användarnamnet från URL:en och renderar sedan en hälsning med det användarnamnet.
URL-parametrar
URL-parametrar i React Router är bitar av data som skickas till en rutt som en del av URL:en. De tillåter utvecklare att skicka dynamisk information till en rutt, till exempel ett ID eller frågesträng. Detta kan användas för att skapa dynamiska rutter som kan användas för saker som att visa specifika objekt från en databas eller filtrera innehåll baserat på användarinmatning. React Router tillhandahåller verktyg för att komma åt och manipulera URL-parametrar, vilket gör det enkelt att använda dem i din applikation.
Hur får du URL-parametrarna från en rutt i React
I React Router kan du komma åt URL-parametrarna från en rutt med hjälp av useParams-kroken. Denna hook returnerar ett objekt som innehåller nyckel-värdepar av URL-parametrarna. Till exempel, om din rutt är /user/:id, kan du komma åt parametern id med useParams().id.
