Gérer la navigation imbriquée et interapplications
Apprenez à coordonner les routes imbriquées gérées par chaque micro-frontend et à naviguer facilement d’un MFE à un autre.
Gérer la navigation imbriquée et interapplications est une leçon Micro Frontends Architecture with Module Federation gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Micro Frontends Architecture with Module Federation, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Micro Frontends Architecture with Module Federation comprend 4 leçons au total.
Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.
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.
Questions Fréquemment Posées
La leçon « Gérer la navigation imbriquée et interapplications » est-elle gratuite ?
Oui — le texte complet de « Gérer la navigation imbriquée et interapplications » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Micro Frontends Architecture with Module Federation, passe à CoddyKit PRO. Le cours Micro Frontends Architecture with Module Federation comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Gérer la navigation imbriquée et interapplications » ?
Apprenez à coordonner les routes imbriquées gérées par chaque micro-frontend et à naviguer facilement d’un MFE à un autre. Tu pratiques Micro Frontends Architecture with Module Federation avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Micro Frontends Architecture with Module Federation ?
Aucune expérience préalable n'est requise. Micro Frontends Architecture with Module Federation sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.
Combien de temps prend la leçon « Gérer la navigation imbriquée et interapplications » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Micro Frontends Architecture with Module Federation ?
Oui. Chaque leçon Micro Frontends Architecture with Module Federation inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Stratégie de routage centralisé
- Mise en œuvre du routage fédéré
- Liens profonds et gestion des URL
- Gérer la navigation imbriquée et interapplications