El principal problema relacionat amb els paràmetres URL de React Router és que poden ser difícils d'utilitzar en rutes dinàmiques. Això es deu al fet que els paràmetres d'URL són estàtics i no es poden canviar després de crear la ruta. Això vol dir que si un usuari necessita accedir a una pàgina diferent amb paràmetres diferents, haurà de crear una ruta nova per a cada combinació de paràmetres. A més, quan s'utilitzen paràmetres d'URL, pot ser difícil fer un seguiment de totes les combinacions possibles i assegurar-se que l'encaminador gestiona correctament cadascuna.
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.
);
};
Aquest codi està configurant un encaminador React per representar una pàgina amb un nom d'usuari des de l'URL.
1. La primera línia importa components de la biblioteca DOM de React Router.
2. La funció App retorna el component Router amb un component Route dins, que especifica que qualsevol URL que comenci per “/usuari/” hauria de representar el component UserPage.
3. La funció UserPage utilitza useParams() per obtenir el nom d'usuari de l'URL i, a continuació, fa una salutació amb aquest nom d'usuari.
Paràmetres d'URL
Els paràmetres d'URL a React Router són peces de dades que es passen a una ruta com a part de l'URL. Permeten als desenvolupadors passar informació dinàmica a una ruta, com ara un identificador o una cadena de consulta. Això es pot utilitzar per crear rutes dinàmiques que es poden utilitzar per a coses com ara mostrar elements específics d'una base de dades o filtrar contingut basat en l'entrada de l'usuari. React Router ofereix eines per accedir i manipular els paràmetres d'URL, de manera que és fàcil utilitzar-los a la vostra aplicació.
Com s'obtenen els paràmetres d'URL d'una ruta a React
A React Router, podeu accedir als paràmetres d'URL des d'una ruta mitjançant el ganxo useParams. Aquest ganxo retorna un objecte que conté parells clau-valor dels paràmetres d'URL. Per exemple, si la vostra ruta és /user/:id, podeu accedir al paràmetre id amb useParams().id.
