Gestión de la navegación anidada y entre aplicaciones
Aprenda a coordinar las rutas anidadas propiedad de cada micro frontend y a navegar sin interrupciones de un MFE a otro.
Gestión de la navegación anidada y entre aplicaciones es una lección gratuita de Micro Frontends Architecture with Module Federation en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Micro Frontends Architecture with Module Federation, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Micro Frontends Architecture with Module Federation incluye 4 lecciones en total.
Partes de esta lección aún no han sido traducidas y se muestran en inglés.
The Nested Routing Challenge
In federated apps, the shell owns top-level routes while each micro frontend owns its own internal (nested) routes. Coordinating the two is the heart of MFE navigation.
Route Ownership
A clear rule helps: the shell maps a route prefix to an MFE, and everything below that prefix belongs to the MFE.
/products/* -> product MFE
/cart/* -> cart MFE
/account/* -> account MFEMounting an MFE at a Prefix
The shell renders the MFE for a prefix and lets it handle the remaining path segment.
<Route path="/products/*" element={<ProductApp />} />Nested Routes Inside an MFE
The MFE defines its own router scoped to its prefix, so it controls its sub-pages without the shell knowing about them.
<Routes>
<Route path="/" element={<List />} />
<Route path=":id" element={<Detail />} />
</Routes>basename for Scoped Routers
Give the MFE router a basename matching its prefix so its links resolve correctly within the larger app.
<BrowserRouter basename="/products">
...
</BrowserRouter>Cross-App Navigation
Sometimes one MFE must send the user into another (e.g. cart linking to checkout). The challenge: it should not import the other MFE router directly.
Navigating via the URL
The cleanest cross-app navigation just changes the URL. The shell router then mounts the right MFE — no direct coupling needed.
history.pushState({}, "", "/checkout");
window.dispatchEvent(new PopStateEvent("popstate"));A Shared Navigation Service
To avoid manual history hacks, the shell can expose a small navigate function that MFEs call, centralizing navigation logic.
import { navigate } from "shell/navigation";
navigate("/checkout");Keeping Routers in Sync
All MFEs must respond to the same browser history. Using one history source (the browser History API) keeps the shell and every MFE router synchronized on back/forward.
Avoiding Route Conflicts
Two MFEs claiming overlapping prefixes cause unpredictable rendering. Maintain a single registry of route prefixes to guarantee they never collide.
Lazy Loading per Route
Combine nested routing with lazy loading: only fetch an MFE bundle when the user navigates to its prefix, keeping initial load small.
const ProductApp = React.lazy(() => import("products/App"));Quick Check
Test your nested-routing knowledge.
Recap
You learned nested and cross-app navigation:
- Shell owns prefixes; MFEs own nested routes
- Use
basenameto scope MFE routers - Navigate across apps via URL or a shared service
- Share one browser history source
- Prevent prefix conflicts and lazy-load by route
Coordinated routing makes federated navigation feel seamless.
Aprende JavaScript con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 12
- Lecciones
- 48
Preguntas frecuentes
¿La lección «Gestión de la navegación anidada y entre aplicaciones» es gratis?
Sí — el texto completo de «Gestión de la navegación anidada y entre aplicaciones» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Micro Frontends Architecture with Module Federation, actualiza a CoddyKit PRO. El curso de Micro Frontends Architecture with Module Federation incluye 4 lecciones en total.
¿Qué aprenderé en «Gestión de la navegación anidada y entre aplicaciones»?
Aprenda a coordinar las rutas anidadas propiedad de cada micro frontend y a navegar sin interrupciones de un MFE a otro. Practicas Micro Frontends Architecture with Module Federation con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Micro Frontends Architecture with Module Federation?
No se requiere experiencia previa. Micro Frontends Architecture with Module Federation en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «Gestión de la navegación anidada y entre aplicaciones»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Micro Frontends Architecture with Module Federation?
Sí. Cada lección de Micro Frontends Architecture with Module Federation incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Estrategia de enrutamiento centralizado
- Implementación del enrutamiento federado
- Deep linking y gestión de URL
- Gestión de la navegación anidada y entre aplicaciones