微前端主应用和子应用快速切换两个子应用路由会出现404，应该怎么解决

Question

微前端主应用和子应用快速切换两个子应用路由会出现404，应该怎么解决

Answer 1

让阿豪来帮你解答，本回答参考chatgpt3.5编写提供，如果还有疑问可以评论或留言

问题描述： 切换微前端子应用时，发现快速切换两个子应用时，会出现404错误，即找不到路由。 解决方法：

1. 使用动态路由加载 在主应用中使用 react-router-dom 的 lazy 和 Suspense 实现动态路由加载，主应用在切换子应用时只需加载对应的子应用路由即可。 示例代码：

// 主应用 router.js
import React, { lazy, Suspense } from 'react';
import { Route, Switch } from 'react-router-dom';
const SubApp1Lazy = lazy(() => import('subapp1/Router'));
const SubApp2Lazy = lazy(() => import('subapp2/Router'));
const Router = () => (
  <Suspense fallback={<div>Loading...</div>}>
    <Switch>
      <Route path="/subapp1" component={SubApp1Lazy} />
      <Route path="/subapp2" component={SubApp2Lazy} />
    </Switch>
  </Suspense>
);
export default Router;

在子应用中也同样使用动态路由加载。 2. 使用 single-spa 使用 single-spa 解决微前端子应用的路由问题。single-spa 是一个前端微服务框架，可用于将多个应用程序集成到一个页面中。 示例代码：

// 主应用 config.js
import { registerApplication, start } from 'single-spa';
registerApplication(
  'subapp1',
  () => import('subapp1'),
  (location) => location.pathname.startsWith('/subapp1')
);
registerApplication(
  'subapp2',
  () => import('subapp2'),
  (location) => location.pathname.startsWith('/subapp2')
);
start();

// 子应用 index.js
import { registerApplication, start } from 'single-spa';
const subapp1 = /* ... */;
registerApplication(
  'subapp1',
  () => subapp1,
  () => true
);
start();

参考文献： - https://dev.to/nikolaygul/fixing-route-404-on-fast-refresh-in-react-with-lazy-loading-react-router-b0l - https://single-spa.js.org/docs/ecosystem-react/