[qiankun-plugin]:子应用的路由是否需要在主应用中注册

[food-billboard]

问题描述

主应用和子应用都是使用的hash路由，当子应用跳转路由时，报警告说找不到路由。

代码复现

主应用

• 框架
  • umi 4.x
  • umi-qiankun 2.43.3
• 配置

{
   history: {
    type: 'hash'
  },
  routes: [
    {
      name: '首页',
      path: '/home',
      component: './Home',
    },
    {
      name: 'react子应用',
      path: '/sub-react-project',
      microApp: 'sub-react-project'
    },
  ],
  qiankun: {
    master: {
      apps: [
        {
          name: 'sub-react-project',
          entry: '//localhost:5000',
          container: '#sub-react-project',
          activeRule: getActiveRule('#/sub-react-project')
        },
      ]
    }
  },
}

子应用

• 框架
  • react 18.x
  • react-router-dom 6.10.0
• 入口文件

import React from 'react';
import ReactDOM from 'react-dom/client';
import {
  createHashRouter,
  RouterProvider,
  useNavigate,
} from 'react-router-dom';
import './index.css';
import './publicPath';
import routes from './routes';

let root;

const Mine = () => {
  const navigate = useNavigate();
  return <div>mine</div>;
};
const App = () => {
  const navigate = useNavigate();
  return (
    <div onClick={() => navigate('/mine')}>
      to mine 
    </div>
  )
};

const routes = [
  {
    path: '/mine',
    element: <Mine />,
  },
  {
    path: '/',
    element: <App />,
  },
];

if (!window.__POWERED_BY_QIANKUN__) {
  render();
}

function render(props?: any) {
  root?.unmount();

  root = ReactDOM.createRoot(document.getElementById('sub-react-project'));
  const router = createHashRouter(routes, {
    basename: window.__POWERED_BY_QIANKUN__ ? '/sub-react-project' : '/',
  });
  root.render(
    <RouterProvider
      router={router}
      fallbackElement={<div>数据加载中...</div>}
    />,
  );
}
export async function bootstrap() {}
export async function mount(props) {
  render(props);
}
export async function unmount(props) {
  root?.unmount();
}
export async function update(props) {}

期望结果

子应用中点击to mine后跳转到子应用的/mine路由下

实际

页面空白并警告

tip

主应用qiankun配置中增加子应用的路由信息后，可正常跳转

  // umirc.js 
  export default {
    qiankun: {
      master: {
        // ...apps配置
        routes: [
          path: '/sub-react-project/mine',
          microApp: 'sub-react-project'
        ]
      }
    },
  }

提问

是否一定需要添加子应用的路由到主应用中。