React
Explica navegación avanzada con loaders, rutas diferidas, estados pendientes, errores y división de código para cargar cada sección cuando realmente se necesita.
Las rutas organizan pantallas, layouts y estados de navegación. No deberían limitarse a cambiar componentes según una cadena.
<Route path="dashboard" element={<DashboardLayout />}>
<Route index element={<Overview />} />
<Route path="orders" element={<Orders />} />
<Route path="orders/:orderId" element={<OrderDetail />} />
</Route>Outlet representa la región donde aparece la ruta hija.
Filtros, búsqueda, página y selección compartible suelen pertenecer a search params:
const [params, setParams] = useSearchParams();
const query = params.get("query") ?? "";La URL permite recargar, compartir y usar atrás/adelante.
Lazy loading reduce el bundle inicial. Coloca Suspense y Error Boundaries en límites que mantengan navegación estable.
Una ruta protegida en cliente mejora UX, pero no asegura datos ni operaciones. El servidor debe validar permisos.
Usa enlaces para navegación iniciada por el usuario. Reserva navigate para resultados de acciones o flujos donde no existe un enlace semántico.
navigate donde corresponde un enlace.El router estructura estados navegables; la URL es una fuente de estado y el servidor conserva la autoridad de acceso.
Una navegación real puede necesitar simultáneamente:
match de rutas
+ carga de código
+ carga de datos
+ autorización
+ pending
+ error
+ scroll/focus
+ actualización de URLDiseñar únicamente el componente final deja estos estados dispersos.
En Declarative Mode puedes usar lazy y Suspense:
const ReportsPage = lazy(() => import("./ReportsPage"));En Data/Framework Mode, las rutas pueden definir módulos lazy para cargar componente, loader y action bajo el contrato del router. Prefiere la API del modo utilizado para evitar waterfalls donde primero llega el componente y después descubre datos.
Un módulo de ruta puede agrupar:
La forma exacta depende del modo y versión. El objetivo conceptual es co-localizar responsabilidades de la URL, no mezclar todo el dominio en un archivo gigante.
const navigation = useNavigation();
const isNavigating = navigation.state === "loading";Diferencia:
Un spinner global puede ser excesivo. Mantén shell, navegación y contenido anterior cuando sea coherente, y muestra pending cerca de la región afectada.
Un fetcher ejecuta loader/action sin navegación:
const fetcher = useFetcher();
<fetcher.Form method="post" action={`/items/${item.id}/favorite`}>
<button disabled={fetcher.state !== "idle"}>Favorito</button>
</fetcher.Form>Es útil para:
Cada fetcher tiene state propio, lo que evita bloquear toda la ruta.
Después de Actions, React Router puede revalidar datos. No desactives revalidación solo por reducir requests sin analizar consistencia. Una función shouldRevalidate o estrategia avanzada puede optimizar, pero si es incorrecta deja UI stale.
Data routers pueden ejecutar loaders de rutas coincidentes en paralelo. Un waterfall reaparece cuando:
Dibuja dependencias y adelanta trabajo cuando sea seguro.
Framework Mode puede precargar rutas, código y datos mediante APIs o convenciones. En otros modos puedes iniciar preload por intención. Evalúa:
No precargues cada ruta pesada indiscriminadamente.
setSearchParams((current) => {
const next = new URLSearchParams(current);
next.set("query", query);
next.set("page", "1");
return next;
});Preserva params no relacionados y define defaults. Decide si cada pulsación debe crear historial o usar replace. Para búsquedas rápidas, debounce puede evitar una entrada por tecla.
Formularios con cambios sin guardar pueden advertir antes de salir. Las APIs de bloqueo deben usarse con cuidado:
Una confirmación no garantiza que el proceso no se cierre abruptamente.
Puedes leer fetcher.formData para reflejar temporalmente una intención, como favorito. La respuesta y revalidación deben reconciliar el estado. Maneja error y varias operaciones simultáneas por ID.
Una route error boundary puede acceder a errores lanzados por loader/action. Clasifica:
No muestres detalles internos. Permite reintentar o volver a una ruta segura.
En rutas con Actions servidor:
Framework Mode puede combinar SSR, SPA y prerender. Una ruta puede necesitar diferente estrategia según datos. No confundas que React Router sea framework con que toda ruta se renderice siempre en servidor.
Durante navegación:
aria-current en navegación.Prueba flujos, no solo matches:
shouldRevalidate=false puede ser peligroso?Estado global y stores externos clasifica qué información debe salir del router y qué debe permanecer en URL o caché.