Parámetros de ruta con React Router

Un parámetro de ruta representa una parte variable de la dirección. En /usuarios/234, el valor 234 puede identificar al usuario que queremos mostrar. El patrón de ruta será /usuarios/:id.

Preparar React Router #

En el proyecto Vite de prácticas instala el paquete de React Router:

1npm install react-router

En esta edición utilizamos las importaciones del paquete react-router que muestra su documentación actual. En ejemplos de otras versiones puedes encontrar estas APIs importadas desde react-router-dom. Mantén una configuración coherente en tu proyecto de prácticas.

Sustituye src/main.tsx para envolver la aplicación una sola vez:

1import { StrictMode } from 'react';
2import { createRoot } from 'react-dom/client';
3import { BrowserRouter } from 'react-router';
4import App from './App';
5import './index.css';
6
7createRoot(document.getElementById('root')!).render(
8  <StrictMode>
9    <BrowserRouter>
10      <App />
11    </BrowserRouter>
12  </StrictMode>,
13);

Declarar la ruta y leer el valor #

En src/App.tsx:

1import { Link, Route, Routes, useParams } from 'react-router';
2
3function Usuario() {
4  const { id } = useParams<{ id: string }>();
5  if (!id) return <p>No se ha indicado un usuario.</p>;
6  return <p>Mostrando el usuario {id}</p>;
7}
8
9export default function Ejem_21() {
10  return (
11    <>
12      <nav>
13        <Link to="/usuarios/234">Usuario 234</Link>
14        {' | '}
15        <Link to="/usuarios/567">Usuario 567</Link>
16      </nav>
17      <Routes>
18        <Route path="/" element={<p>Selecciona un usuario.</p>} />
19        <Route path="/usuarios/:id" element={<Usuario />} />
20        <Route path="*" element={<p>Página no encontrada.</p>} />
21      </Routes>
22    </>
23  );
24}

useParams lee los valores de la ruta que coincide con la dirección actual. id llega como texto, aunque contenga dígitos. El tipado no convierte el valor ni consulta automáticamente una API.

Para usarlo como número, conviértelo con Number(id) y valida que tenga sentido para tu aplicación. El parámetro de la URL no demuestra que exista un usuario ni concede permisos sobre sus datos.

Dónde utilizar esta configuración #

Estos ejemplos pertenecen a la aplicación Vite del curso. En un proyecto Next.js se usan sus rutas y APIs de navegación; no hay que envolver la plataforma que contiene este curso en BrowserRouter.

Prueba tú #

Navega entre los enlaces y cambia el parámetro a ana para comprobar que sigue siendo texto. Visita una dirección sin ruta definida para ver la alternativa de página no encontrada.

Consulta la guía oficial de rutas y la referencia de useParams.

Cuestionario del tema #

Abre el cuestionario en las actividades de este tema para comprobar lo aprendido. Cada respuesta incluye una explicación.