Microfrontend Master & Route Micro App

[duongkhang042001]

export default [
  {
    path: '/auth',
    hideInMenu: true,
    layout: false,
    component: '../layouts/AuthLayout',
    routes: [
      {
        path: '/auth/sign-in',
        name: 'Sign In',
        component: './Auth/SignIn',
      },
      {
        path: '/auth/sign-up',
        component: './Welcome',
      },
    ],
  },
  {
    path: '/',
    redirect: '/dashboard',
  },
  {
    path: '/dashboard',
    icon: 'DashboardOutlined',
    name: 'Dashboard',
    wrappers: ['@/wrappers/auth'],
    component: './Welcome',
  },
  {
    path: '/identity',
    name: 'Identity',
    icon: 'UserOutlined',
    microApp: 'identity',
    routes: [
      {
        path: '/identity/users',
        name: 'Users',
        microApp: 'identity',
        icon: 'UserOutlined',
      },
      {
        path: '/identity/users/create',
        hideInMenu: true,
        microApp: 'identity',
        name: 'Create User',
      },
      {
        path: '/identity/users/:id/edit',
        hideInMenu: true,
        microApp: 'identity',
        name: 'Edit User',
      },
      {
        path: '/identity/users/:id/detail',
        hideInMenu: true,
        microApp: 'identity',
        name: 'User Detail',
      },
      {
        path: '/identity/roles',
        name: 'Role',
        microApp: 'identity',
        icon: 'ControlOutlined',
      },
      {
        path: '/identity/roles/create',
        hideInMenu: true,
        microApp: 'identity',
        name: 'Create Role',
      },
      {
        path: '/identity/roles/:id/edit',
        hideInMenu: true,
        microApp: 'identity',
        name: 'Edit Role',
      },
      {
        path: '/identity/roles/:id/detail',
        hideInMenu: true,
        microApp: 'identity',
        name: 'Role Detail',
      },
    ],
  },
  {
    path: '*',
    layout: false,
    component: './404',
  },
];

Hello everyone, I'm currently using umijs/max and qiankun to configure my system. In the route configuration shown above, when I navigate from the parent app to the sub-app, everything works fine. However, when I reload the page in the MicroApp, I encounter a 404 error.

If anyone has faced a similar issue or has any suggestions on how to resolve this, I would greatly appreciate your assistance. Thank you very much!.

[duongkhang042001]

Help me, pls :((

[fz6m]

自行排查下当刷新页面后，是任何路径都会这样，还是仅附带微前端应用的页面路径会刷新 404 ，如果是在生产环境刷新 404 ，需要 Nginx 或网关把请求都 fallback 到 index.html （自行搜索 nginx 部署 SPA 应用配置即可）。

如果这个问题仅发生在微前端页面且为本地开发环境，需要给一个最小复现。

另外推荐你自己手动写一个组件用于每个路由，通过手动添加 <MicroApp name={...} base={...} /> 来展示你的子应用。

[duongkhang042001]

Thanks for your help!