Gefedereerde routing implementeren
Implementeer routing waarbij elke Micro Frontend zijn eigen routes beheert, geïntegreerd in een globale router.
Gefedereerde routing implementeren is een gratis Architectuur van micro-frontends met Module Federation-les op CoddyKit. Dit is les 2 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Architectuur van micro-frontends met Module Federation. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Architectuur van micro-frontends met Module Federation bevat in totaal 4 lessen.
Wat is gefedereerde routering
In een Micro Frontend-architectuur betekent gefedereerde routering dat elke afzonderlijke MFE verantwoordelijk is voor het beheren van zijn eigen specifieke routes. In plaats van dat één centrale applicatie alle routes bepaalt, definieert elke MFE zijn eigen paden.
Deze aanpak geeft teams meer autonomie. Ze kunnen de routeringslogica onafhankelijk ontwikkelen en implementeren, zonder sterk gekoppeld te zijn aan het routeringssysteem van de hoofdapplicatie.
Voordelen van gefedereerde routes
Gefedereerde routering biedt verschillende belangrijke voordelen:
- Autonomie: MFE-teams beheren hun eigen navigatie.
- Onafhankelijke implementatie: Wijzigingen in de routes van een MFE vereisen niet dat de volledige hostapplicatie opnieuw wordt geïmplementeerd.
- Schaalbaarheid: De routeringslogica is gemakkelijker te beheren wanneer het aantal MFE's groeit.
- Technologieonafhankelijk: Verschillende MFE's kunnen verschillende routeringsbibliotheken gebruiken.
Kernprincipe: eigenaarschap van routes
Het fundamentele idee achter gefedereerde routering is dat elke Micro Frontend zijn eigen set routes publiceert. Zie het als een miniapplicatie binnen het grotere systeem, die verantwoordelijk is voor haar interne navigatiestructuur.
De hostapplicatie fungeert vervolgens als verzamelaar: deze ontdekt de routes waarvan de MFE's eigenaar zijn en integreert ze in één samenhangende routeringservaring voor de gebruiker.
MFE definieert lokale routes
Zo kan een Micro Frontend (laten we deze "MFE A" noemen) zijn interne routes definiëren. Dit zijn specifieke paden waarvoor MFE A verantwoordelijk is voor het weergeven van de inhoud.
We gebruiken een eenvoudige arraystructuur om routes weer te geven. Elke route heeft een path en een component of weergave die moet worden weergegeven.
// mfe-a-routes.js
// This MFE owns routes starting with '/app-a'
export const mfeARoutes = [
{
path: '/app-a',
component: 'MFE_A_Dashboard'
},
{
path: '/app-a/profile',
component: 'MFE_A_UserProfile'
}
];De routes van een andere MFE
Op dezelfde manier definieert een andere Micro Frontend ("MFE B") zijn eigen set routes. Let erop dat de paden anders zijn en vaak een prefix hebben om conflicten te voorkomen, zodat het eigenaarschap duidelijk blijft.
Dankzij deze scheiding kunnen MFE A en MFE B hun navigatie onafhankelijk ontwikkelen.
// mfe-b-routes.js
// This MFE owns routes starting with '/app-b'
export const mfeBRoutes = [
{
path: '/app-b',
component: 'MFE_B_HomePage'
},
{
path: '/app-b/settings',
component: 'MFE_B_SettingsPage'
}
];Host verzamelt MFE-routes
De hostapplicatie fungeert als centrale coördinator. Deze moet de routedefinities van elke Micro Frontend ontdekken en importeren.
Met Module Federation kunnen externe MFE's deze routedefinities beschikbaar maken en kan de host ze gebruiken. Zo ontstaat effectief een algemene routenkaart uit gedistribueerde bronnen.
Integratie in een algemene router
De hostapplicatie neemt vervolgens alle verzamelde routes en integreert ze in zijn eigen algemene routerinstantie. Dit voorbeeld simuleert hoe een hostapplicatie routes van verschillende MFE's kan laden en verwerken om navigatie af te handelen.
Probeer de variabele currentPath in de code te wijzigen en voer de code uit!
// mfe-a-routes.js (Simulated Remote MFE)
export const mfeARoutes = [
{ path: '/app-a', component: 'MFE_A_Dashboard' },
{ path: '/app-a/profile', component: 'MFE_A_UserProfile' }
];
// mfe-b-routes.js (Simulated Remote MFE)
export const mfeBRoutes = [
{ path: '/app-b', component: 'MFE_B_HomePage' },
{ path: '/app-b/settings', component: 'MFE_B_SettingsPage' }
];
// host-app.js (Main Application Entry Point)
// In a real app, these would be dynamically imported
// via Module Federation.
const allFederatedRoutes = [
...mfeARoutes,
...mfeBRoutes
];
function globalRouter(currentPath) {
console.log(`Attempting to navigate to: ${currentPath}`);
const matchedRoute = allFederatedRoutes.find(
route => route.path === currentPath
);
if (matchedRoute) {
console.log(`Match found! Rendering: ${matchedRoute.component}`);
} else {
console.log(`No route found for: ${currentPath}. Showing 404.`);
}
}
// Simulate user navigation
console.log("--- Global Routing Simulation ---");
globalRouter('/app-a');
globalRouter('/app-b/settings');
globalRouter('/app-a/profile');
globalRouter('/unknown-path');
globalRouter('/app-b');Naadloze navigatie tussen MFE's
Zodra de algemene router van de host alle gefedereerde routes heeft geïntegreerd, verloopt de navigatie tussen verschillende Micro Frontends naadloos. Vanuit het perspectief van de gebruiker voelt het als één uniforme applicatie.
Wanneer een gebruiker op een link naar /app-b/settings klikt, stelt de algemene router vast dat dit pad bij MFE B hoort en delegeert deze het weergeven of activeren van MFE B.
Routeconflicten voorkomen
Wanneer meerdere MFE's routes definiëren, kunnen er conflicten ontstaan als twee MFE's hetzelfde pad definiëren (bijvoorbeeld als beide een route /dashboard hebben).
Veelgebruikte strategieën om dit te voorkomen zijn:
- Naamruimten: MFE-routes voorzien van een prefix (bijvoorbeeld
/mfea/dashboarden/mfeb/dashboard). - Unieke paden: Ervoor zorgen dat de routes van elke MFE van nature uniek zijn.
- Overschrijven door de host: De host toestaan om conflicterende routes voorrang te geven of opnieuw toe te wijzen.
Controleer je begrip
Stel dat je een hostapplicatie hebt die routes van twee Micro Frontends, MFE-A en MFE-B, integreert. MFE-A definieert /products en /products/:id. MFE-B definieert /cart en /checkout.
Welke van de volgende beschrijvingen geeft de rol van de hostapplicatie in deze opstelling met gefedereerde routering het beste weer?
Herhaling: gefedereerde routering
Je hebt geleerd over gefedereerde routering, waarbij elke Micro Frontend eigenaar is van zijn eigen routes en deze definieert. We hebben gezien hoe een hostapplicatie deze routes verzamelt om een uniforme navigatie-ervaring te creëren.
- Elke MFE declareert zijn eigen routes.
- De hostapplicatie verzamelt en integreert de MFE-routes.
- Dit waarborgt de autonomie en onafhankelijke implementatie van MFE's.
- Naamruimten helpen conflicten voorkomen.
Deze aanpak is essentieel voor grootschalige MFE-systemen, omdat deze onafhankelijkheid combineert met een consistente gebruikerservaring.
Leer JavaScript met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 12
- Lessen
- 48
Veelgestelde vragen
Is de les “Gefedereerde routing implementeren” gratis?
Ja — de volledige tekst van “Gefedereerde routing implementeren” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus Architectuur van micro-frontends met Module Federation wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus Architectuur van micro-frontends met Module Federation bevat in totaal 4 lessen.
Wat leer ik in “Gefedereerde routing implementeren”?
Implementeer routing waarbij elke Micro Frontend zijn eigen routes beheert, geïntegreerd in een globale router. Je oefent met Architectuur van micro-frontends met Module Federation door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met Architectuur van micro-frontends met Module Federation te beginnen?
Ervaring vooraf is niet nodig. Architectuur van micro-frontends met Module Federation op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 2 van 4.
Hoe lang duurt de les “Gefedereerde routing implementeren”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over Architectuur van micro-frontends met Module Federation?
Ja. Elke les over Architectuur van micro-frontends met Module Federation bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Gecentraliseerde routingstrategie
- Gefedereerde routing implementeren
- Deep linking en URL-beheer
- Geneste navigatie en navigatie tussen apps afhandelen