Pasar parámetros en las rutas de React Router
En React Router, los parámetros en las rutas permiten pasar información dinámica a los componentes. Esto se logra mediante Route Parameters y Search Parameters, que facilitan el manejo de valores en la URL.
Parámetros en las rutas de React Router
Para definir y utilizar parámetros en una ruta con React Router (v6), se sigue esta estructura:
1. Definir la ruta con un parámetro dinámico usando :nombreParametro.
2. Obtener el valor del parámetro con el hook useParams().
Ejemplo:
import { BrowserRouter as Router, Routes, Route, useParams } from "react-router-dom";
function PerfilUsuario() {
let { usuarioId } = useParams(); // Obtener el parámetro de la URL
return <h2>Perfil del usuario: {usuarioId}</h2>;
}
function App() {
return (
<Router>
<Routes>
<Route path="/perfil/:usuarioId" element={<PerfilUsuario />} />
</Routes>
</Router>
);
}
export default App;
En este ejemplo, si el usuario accede a /perfil/123, la página mostrará "Perfil del usuario: 123".
Parámetros de búsqueda (Query Parameters)
Otra forma de pasar datos es a través de query parameters, utilizando useSearchParams().
Ejemplo:
import { useSearchParams } from "react-router-dom";
function Buscar() {
let [searchParams] = useSearchParams();
let query = searchParams.get("q"); // Obtener el valor de "q"
return <h2>Buscando: {query}</h2>;
}
Si el usuario visita /buscar?q=React, se mostrará "Buscando: React".
Enlace a la documentación oficial
Para más información, visita la documentación de React Router.
Jorge García
Fullstack developer