Ejemplos de React Router 7 para copiar: configuración en cada modo, layouts anidados, params, loaders y actions, rutas protegidas, páginas 404, rutas lazy y migración desde v6.
React Router 7 se distribuye como un solo paquete, react-router. Envuelve tu app en BrowserRouter para un enrutado sencillo, o crea las rutas con createBrowserRouter y RouterProvider para usar loaders, actions y error boundaries. Anida rutas hijas bajo un layout que renderice Outlet, lee los segmentos de la ruta con useParams y las query strings con useSearchParams.
Las APIs que más vas a usar
Todos los ejemplos de abajo están escritos para React Router 7 e importan desde react-router. La pequeña demo de arriba funciona de verdad, así que puedes navegar por rutas anidadas y params; usa la versión del router que emplea este sitio, que aparece indicada en ella.
No. En v7 todo se exporta desde react-router. react-router-dom aún se instala y reexporta la misma API para facilitar la actualización, pero los proyectos nuevos solo necesitan react-router.
El modo data es una librería: tú mismo construyes el array de rutas con createBrowserRouter. El modo framework añade un plugin de Vite que lee app/routes.ts, divide el código por ruta, genera tipos y puede renderizar en el servidor.
Añade una ruta con path "*" como último hijo de tu ruta raíz. Coincide con cualquier URL que no haya coincidido con otra. En un hosting estático, haz también que el servidor devuelva index.html para las rutas desconocidas, para que el router tenga ocasión de mostrarla.
No, los params siempre son cadenas, o undefined cuando el segmento es opcional y falta. Conviértelos con Number() y gestiona el caso en que el resultado no sea un número válido.
En general sí. Activa primero los seis future flags de v7 en v6 y corrige los avisos, y después actualiza. La guía oficial dice que, a partir de ahí, no hay cambios incompatibles salvo el cambio de nombre del paquete.
Las tres formas de usar React Router 7
En v7 un solo paquete cubre las apps web. react-router-dom solo sigue existiendo como reexportación para imports antiguos.
Las rutas son un array normal, lo que habilita loaders, actions, UI de carga y errorElement. Todo se importa desde react-router.
La configuración más pequeña y la más parecida al código de v6. No tiene loaders ni actions; carga los datos dentro de los componentes.
El plugin de Vite de @react-router/dev lee este archivo, divide el código por ruta y genera tipos en ./+types/ para cada módulo de ruta.
Cada archivo de ruta exporta su loader y un componente por defecto. Los tipos Route generados dan tipos reales a params y loaderData.
El padre renderiza la UI compartida una sola vez; <Outlet /> marca dónde aparece la hija que coincide. Una ruta sin path, como la de abajo, es una ruta de layout.
Un segmento que empieza por dos puntos se convierte en un param. Los params siempre son cadenas, así que convierte tú los números.
Funciona como useState pero guarda el valor en la query string, así que los filtros sobreviven a una recarga y se pueden compartir como enlace.
El loader se ejecuta antes de que la ruta se renderice. Enviar <Form method="post"> ejecuta la action y, cuando termina, el router vuelve a ejecutar los loaders de la página. Devuelve objetos normales; json() y defer() están obsoletos en v7.
Comprueba la sesión en un loader padre y redirige antes de que se renderice ninguna hija. Pasa la ruta original para poder devolver a la gente allí tras iniciar sesión.
Sin loaders, un componente envoltorio comprueba la autenticación y renderiza <Navigate> en lugar de la página.
Un path * captura cualquier URL que no haya coincidido con otra. errorElement (o ErrorBoundary como componente) se renderiza cuando un loader, una action o el renderizado lanzan un error; useRouteError te dice qué se lanzó.
lazy carga el código de una ruta la primera vez que alguien la visita. Devuelve las propiedades de la ruta que quieras completar, como Component y loader.
Renderiza <ScrollRestoration /> una vez en el layout raíz de un data router. Hace scroll arriba en las páginas nuevas y restaura la posición anterior al ir atrás y adelante.
Con todos los future flags activados en v6, el paso a v7 no debería requerir ningún otro cambio de código. Publica cada flag por separado para que un problema sea fácil de rastrear. La versión 8 también ha salido ya; su actualización funciona igual, con un nuevo conjunto de flags v8_ que activas mientras sigues en la 7.
Pasar de v6 a v7
Un router dentro de la página que usa react-router-dom 6.30 (la versión que usa este sitio, no v7). Tiene un layout /shop con una lista de productos y páginas de detalle /shop/:productId, un search param ?sort y un 404 comodín. El código de las rutas es el mismo en v7.
Demo
Inicio
Tienda
Enlace roto
URL:
Layout de la tienda
Ordenar (search param)
Nombre
Precio
No hay ningún producto llamado "{id}".
useParams() devolvió productId =
Volver a la lista
Demo en vivo: rutas anidadas y params
Página de inicio. Abre la tienda.
404: ha coincidido la ruta comodín.
Empieza gratis · Sin tarjeta de crédito