search

umijs / plugins

🍣 The one-stop shop for official Umi plugins and presets.
347 stars 239 forks source link

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

Open food-billboard opened 1 year ago

food-billboard commented 1 year ago

问题描述

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

代码复现

主应用

{
   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')
        },
      ]
    }
  },
}

子应用

let root;

const Mine = () => { const navigate = useNavigate(); return

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

const routes = [ { path: '/mine', element: , }, { path: '/', element: , }, ];

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={

数据加载中...
} />, ); } 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`路由下  

### 实际 
  页面空白并警告  

![qiankun-error](https://github.com/umijs/plugins/assets/50391608/15eddd23-bbac-47e8-a20c-89e3ca24d404)

### tip  
  主应用`qiankun`配置中增加子应用的路由信息后，可正常跳转  
```js
  // umirc.js 
  export default {
    qiankun: {
      master: {
        // ...apps配置
        routes: [
          path: '/sub-react-project/mine',
          microApp: 'sub-react-project'
        ]
      }
    },
  }

提问

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