0Pricing
Micro Frontends Architecture with Module Federation · Lección

Estrategia de enrutamiento centralizado

Comprenda cómo una única aplicación host puede gestionar el enrutamiento de todos los Micro Frontends integrados.

Estrategia de enrutamiento centralizado es una lección gratuita de Micro Frontends Architecture with Module Federation en CoddyKit. Esta es la lección 1 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.

Intro to Centralized Routing

Welcome to the lesson on Centralized Routing Strategy in Micro Frontends! This approach is crucial for managing navigation across different parts of a large application.

We'll explore how a single 'host' application can take control of all routing decisions, providing a unified user experience.

What is Centralized Routing?

In a centralized routing setup, the main host application (also known as the shell or container) is responsible for defining and managing all routes for the entire application.

  • It acts as the single source of truth for navigation.
  • It decides which Micro Frontend (MFE) component should be loaded for a given URL path.
  • Remote MFEs typically don't manage their own top-level routes.

The Host's Routing Role

Imagine your host application as a traffic controller. When a user navigates to a URL, the host intercepts it, looks at its routing table, and then directs the request to the appropriate Micro Frontend.

The host often uses a routing library (like React Router for React apps) to define these global routes.

Conceptual Host Router Setup

Here's a simplified look at how a host's routing configuration might appear using a popular routing library. Notice how different paths are mapped to components from various Micro Frontends.

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

// Imagine these are dynamically loaded MFE components
const ProductMFE = React.lazy(() => import('product_app/ProductPage'));
const CartMFE = React.lazy(() => import('cart_app/CartPage'));
const UserProfileMFE = React.lazy(() => import('user_app/ProfilePage'));

const App = () => (
  <Router>
    <Switch>
      <Route path="/products" component={ProductMFE} />
      <Route path="/cart" component={CartMFE} />
      <Route path="/profile" component={UserProfileMFE} />
      <Route path="/" component={HomePage} exact />
    </Switch>
  </Router>
);

export default App;

Dynamic Loading of MFEs

To efficiently load MFEs, the host typically uses dynamic imports. This means an MFE's code is only fetched and loaded when its corresponding route is activated, not upfront when the main application loads.

This improves initial page load times, as users only download the code they need.

Code: Dynamic MFE Import

This snippet shows how React.lazy() combined with Suspense enables dynamic loading and provides a fallback while the MFE component is being fetched.

import React, { Suspense } from 'react';

// Dynamically import a remote component
const RemoteButton = React.lazy(() => import('remoteApp/Button'));

const HostComponent = () => (
  <div>
    <h1>My Host App</h1>
    <Suspense fallback={<div>Loading Remote Button...</div>}>
      <RemoteButton label="Click Me!" />
    </Suspense>
  </div>
);

export default HostComponent;

Benefits of Centralized Routing

Adopting a centralized routing strategy offers several key advantages:

  • Unified User Experience: Ensures consistent navigation patterns and URLs across the entire application.
  • Simplified Global Navigation: Easier to implement a single, cohesive navigation bar or menu.
  • Host Control: The host maintains full control over which MFEs are loaded and when.
  • Easier Analytics: Centralized routing can simplify tracking user journeys across the entire application.

Considerations and Challenges

While beneficial, centralized routing also has its considerations:

  • Host Dependency: The host becomes a critical dependency; if it fails, the entire routing system is down.
  • Scalability of Routing Logic: A very large application might make the host's routing configuration complex and difficult to manage.
  • MFE Autonomy: Remote MFEs have less control over their own public-facing URLs.
  • Version Management: Changes to routes in the host might require coordination with MFE deployments.

When to Use Centralized Routing

This strategy is often ideal for scenarios where:

  • A single team or entity owns the overall application shell and navigation.
  • The application has a clear hierarchy and a relatively stable set of top-level routes.
  • A consistent look and feel across all MFEs is a high priority.
  • There's a need for tight integration and shared context across different parts of the application.

Routing Strategy Check

Which of the following are key characteristics or benefits of a Centralized Routing Strategy in Micro Frontends?

Centralized Routing Recap

In this lesson, we explored the Centralized Routing Strategy. We learned that the host application controls all top-level routes, dynamically loading Micro Frontends as needed.

This approach offers benefits like a unified user experience and simplified global navigation, though it introduces a strong dependency on the host. Understanding when to apply this strategy is key to effective Micro Frontend architecture.

Preguntas frecuentes

¿La lección «Estrategia de enrutamiento centralizado» es gratis?

Sí — el texto completo de «Estrategia de enrutamiento centralizado» 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 «Estrategia de enrutamiento centralizado»?

Comprenda cómo una única aplicación host puede gestionar el enrutamiento de todos los Micro Frontends integrados. 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 1 de 4.

¿Cuánto tiempo toma la lección «Estrategia de enrutamiento centralizado»?

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

  1. Estrategia de enrutamiento centralizado
  2. Implementación del enrutamiento federado
  3. Deep linking y gestión de URL
  4. Gestión de la navegación anidada y entre aplicaciones
← Volver a Micro Frontends Architecture with Module Federation