Routing hoạt động ra sao trong kiến trúc micro-frontend?

Mô hình thường gặp: shell/container giữ routing cấp cao — quyết định path nào thì kích hoạt micro-frontend nào — còn mỗi micro-frontend tự quản các sub-route bên trong nó.

Ví dụ shell map /checkout/* cho app Checkout, rồi bên trong app Checkout có route con /checkout/payment, /checkout/review. single-spa làm việc này qua activeWhen.

Common model: the shell/container owns top-level routing — deciding which path activates which micro-frontend — while each micro-frontend manages its own sub-routes internally.

For example, the shell maps /checkout/* to the Checkout app, and inside Checkout there are nested routes /checkout/payment, /checkout/review. single-spa does this via activeWhen.
The key point: only one "owner" should control the browser's History API to avoid conflicts.
Note: if multiple micro-frontends grab and push history, the back/forward buttons behave incorrectly — agree on a single top-level router, with child apps navigating only within their granted scope.

Xem toàn bộ Micro-frontend cùng filter theo level & chủ đề con.

Mở danh sách Micro-frontend

Ví dụ shell map /checkout/* cho app Checkout, rồi bên trong app Checkout có route con /checkout/payment, /checkout/review. single-spa làm việc này qua activeWhen.

Common model: the shell/container owns top-level routing — deciding which path activates which micro-frontend — while each micro-frontend manages its own sub-routes internally.

For example, the shell maps /checkout/* to the Checkout app, and inside Checkout there are nested routes /checkout/payment, /checkout/review. single-spa does this via activeWhen.
The key point: only one "owner" should control the browser's History API to avoid conflicts.
Note: if multiple micro-frontends grab and push history, the back/forward buttons behave incorrectly — agree on a single top-level router, with child apps navigating only within their granted scope.