Hackforge Academy

Explanation

Routing determines which Micro Frontend should be displayed for a particular URL. The Host application can manage top-level routes and load the appropriate Remote application.

Code:

/products  → Product Micro Frontend
/cart      → Cart Micro Frontend
/payments  → Payment Micro Frontend
/profile   → Account Micro Frontend

Explanation

The Host application can use React Router to define routes for different Micro Frontends and render the required Remote application.

Code:

const routes = [
  { path: '/products', element: <Products /> },
  { path: '/cart', element: <Cart /> },
  { path: '/payments', element: <Payments /> }
];

Explanation

A Remote can manage its own internal routes. For example, the Product Micro Frontend can handle product listing and product details independently.

Code:

Product Remote
├── /products
├── /products/101
└── /products/102

Explanation

The Host can handle the main application routes while a Remote manages routes within its own business domain.

Code:

Host
└── /products/*
      │
      └── Product Remote
          ├── /products
          ├── /products/101
          └── /products/102

Explanation

A well-designed Micro Frontend routing strategy separates application-level navigation from domain-specific navigation while keeping browser URLs consistent and user-friendly.

Code:

                  Browser URL
                       │
                       ↓
                  Host Router
                       │
        ┌──────────────┼──────────────┐
        ↓              ↓              ↓
   Product Remote   Cart Remote   Payment Remote
        │              │              │
   Product Router  Cart Router   Payment Router