Реализация федеративной маршрутизации
Реализуйте маршрутизацию, при которой каждый микрофронтенд управляет собственными маршрутами, интегрированными в глобальный маршрутизатор.
«Реализация федеративной маршрутизации» — бесплатный урок Micro Frontends Architecture with Module Federation на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Micro Frontends Architecture with Module Federation, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Micro Frontends Architecture with Module Federation содержит 4 уроков всего.
Части этого урока еще не переведены и отображаются на английском.
What is Federated Routing?
In a Micro Frontend (MFE) architecture, federated routing means each individual MFE is responsible for managing its own specific routes. Instead of one central application dictating all routes, each MFE declares its own pathways.
This approach gives teams more autonomy, allowing them to develop and deploy routing logic independently without tightly coupling to a main host application's routing system.
Benefits of Federated Routes
Federated routing offers several key advantages:
- Autonomy: MFE teams control their own navigation.
- Independent Deployment: Changes to an MFE's routes don't require redeploying the entire host app.
- Scalability: Easier to manage routing logic as the number of MFEs grows.
- Technology Agnostic: Different MFEs can use different routing libraries.
Core Principle: Route Ownership
The fundamental idea behind federated routing is that each Micro Frontend publishes its own set of routes. Think of it like a mini-application within the larger system, responsible for its internal navigation structure.
The host application then acts as an aggregator, discovering and integrating these MFE-owned routes into a single, cohesive routing experience for the user.
MFE Defining Local Routes
Here's how a Micro Frontend (let's call it "MFE A") might define its internal routes. These are specific paths that MFE A is responsible for rendering.
We're using a simple array structure to represent routes, where each route has a path and a component or view it should render.
// 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'
}
];Another MFE's Routes
Similarly, another Micro Frontend ("MFE B") will define its own set of routes. Notice how its paths are distinct, often prefixed to avoid conflicts, ensuring clear ownership.
This separation allows MFE A and MFE B to evolve their navigation independently.
// 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 Aggregates MFE Routes
The host application's role is to act as the central orchestrator. It needs to discover and import the route definitions provided by each Micro Frontend.
Using Module Federation, these route definitions can be exposed by remote MFEs and consumed by the host, effectively building a global route map from distributed sources.
Integrating into a Global Router
The host application then takes all the aggregated routes and integrates them into its own global router instance. This example simulates how a host app might load and process routes from different MFEs to handle navigation.
Try changing the currentPath variable in the code and run it!
// 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');Seamless Cross-MFE Navigation
Once the host's global router has integrated all federated routes, navigation between different Micro Frontends becomes seamless. From the user's perspective, it feels like a single, unified application.
When a user clicks a link to /app-b/settings, the global router identifies that this path belongs to MFE B and delegates the rendering or activation of MFE B accordingly.
Avoiding Route Conflicts
With multiple MFEs defining routes, conflicts can arise if two MFEs define the same path (e.g., both have a /dashboard route).
Common strategies to prevent this include:
- Namespacing: Prefixing MFE routes (e.g.,
/mfea/dashboard,/mfeb/dashboard). - Unique Paths: Ensuring each MFE's routes are inherently unique.
- Host Override: Allowing the host to prioritize or remap conflicting routes.
Check Your Understanding
Imagine you have a host application integrating routes from two Micro Frontends, MFE-A and MFE-B. MFE-A defines /products and /products/:id. MFE-B defines /cart and /checkout.
Which of the following best describes the host application's role in this federated routing setup?
Recap: Federated Routing
You've learned about federated routing, where each Micro Frontend owns and defines its own routes. We saw how a host application aggregates these routes to create a unified navigation experience.
- Each MFE declares its own routes.
- Host app collects and integrates MFE routes.
- Ensures MFE autonomy and independent deployment.
- Namespacing helps prevent conflicts.
This approach is crucial for large-scale MFE systems, balancing independence with a consistent user experience.
Часто задаваемые вопросы
Урок «Реализация федеративной маршрутизации» бесплатный?
Да — полный текст урока «Реализация федеративной маршрутизации» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Micro Frontends Architecture with Module Federation, подпишись на CoddyKit PRO. Курс Micro Frontends Architecture with Module Federation содержит 4 уроков всего.
Чему я научусь в уроке «Реализация федеративной маршрутизации»?
Реализуйте маршрутизацию, при которой каждый микрофронтенд управляет собственными маршрутами, интегрированными в глобальный маршрутизатор. Ты практикуешь Micro Frontends Architecture with Module Federation с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Micro Frontends Architecture with Module Federation?
Предыдущий опыт не требуется. Micro Frontends Architecture with Module Federation на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «Реализация федеративной маршрутизации»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Micro Frontends Architecture with Module Federation?
Да. Каждый урок Micro Frontends Architecture with Module Federation включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Стратегия централизованной маршрутизации
- Реализация федеративной маршрутизации
- Глубокие ссылки и управление URL
- Обработка вложенной навигации и переходов между приложениями