Как настраивать роутинг в федеративном приложении и микрофронтах?

Что проверяют

Понимаете ли вы, кто владеет адресной строкой, когда приложение собрано из нескольких независимо деплоящихся частей. Следом обычно спрашивают, как один микрофронт переводит пользователя в другой и что будет, если удалённый модуль не загрузился.

Как отвечать

Рабочая схема: хост (shell) владеет верхним уровнем маршрутов, каждый микрофронт получает свой префикс и сам управляет вложенными путями внутри него.

• разделение по префиксу: в хосте на React Router 6 или 7 маршрут path="/orders/*" рендерит удалённый OrdersApp, а внутри него маршруты относительные, без знания полного пути. В single-spa то же делает activeWhen у registerApplication;
• одна история: BrowserRouter создаётся только в хосте. В Module Federation библиотеку роутера выносят в shared с singleton: true, чтобы хост и удалённые модули работали с одним экземпляром и одним контекстом;
• разные фреймворки или версии: удалённый модуль держит роутер в памяти (createMemoryRouter) и синхронизируется с хостом через колбэк или CustomEvent, адресную строку меняет только хост;
• переходы между микрофронтами: через navigate, переданный хостом, или через событие, а не через window.location.href, который перезагрузит страницу целиком;
• загрузка: React.lazy с Suspense плюс error boundary на каждый удалённый модуль, чтобы упавший бандл одной команды не ронял всё приложение;
• сервер: на любой путь отдаётся index.html хоста, иначе обновление страницы на /orders/42 даст 404.

Отдельно договоритесь о реестре префиксов: два микрофронта не должны претендовать на один путь.

Где спотыкаются

Создают BrowserRouter в каждом микрофронте. Появляются две истории, кнопка «назад» ведёт себя непредсказуемо, маршруты рассинхронизируются.

Показывают код на Switch и component. Это API пятой версии React Router, в шестой их заменили Routes и element, и интервьюер это заметит.

Не закладывают отказ удалённого модуля. Без error boundary и таймаута сбой одного деплоя превращается в белый экран у всех.