Qiankun微前端切换React微应用报Target container不存在错误如何解决

问题原因 #

报错核心是qiankun加载微应用时，DOM中不存在你配置的对应id的容器节点，具体由两处代码错误导致：

• 主应用的registerMicroApps和start方法直接写在了App函数组件内部，每次组件重渲染都会重复执行微应用注册、启动逻辑，导致加载逻辑混乱
• Header组件内部额外嵌套了一层BrowserRouter，和App组件顶层的Router实例冲突，Link跳转的路由变更只能作用在Header内部的Router，外层App的Router无法感知路由变化，对应路径的Route不会渲染，自然不会生成对应id的容器div

解决方案 #

第一步：调整微应用注册逻辑 #

将registerMicroApps和start逻辑从App组件内部移出，保证全局仅执行一次，修改后App组件代码如下：

// 微应用注册、启动逻辑放到组件外层，仅执行一次
registerMicroApps([
  {
    name: "react app",
    entry: "//localhost:3001",
    container: "#react-app",
    activeRule: "/react-app",
  },
  {
    name: "react app1",
    entry: "//localhost:3002",
    container: "#react-app1",
    activeRule: "/react-app1",
  },
]);
start();

function App(props) {
  return (
    <div className="App">
      <Header></Header>
      <Router>
        <Switch>
          <Route exact path="/"></Route>
          <Route exact path="/react-app">
            <div id="react-app"></div>
          </Route>
          <Route exact path="/react-app1">
            <div id="react-app1"></div>
          </Route>
        </Switch>
      </Router>
    </div>
  );
}

export default App;

第二步：删除Header组件多余的Router实例 #

Header组件不需要单独嵌套BrowserRouter，直接复用App组件顶层的路由实例即可，修改后代码如下：

const Header = (props) => {
  return (
    <div className={Styles.Header}>
      <img alt="Avocodo Logo" src={Logo}></img>
      <h1>Main Application</h1>
      <Link to="/react-app">Sub-App</Link>
      <Link to="/react-app1">Sub-App1</Link>
    </div>
  );
};

export default Header;

可选兜底方案 #

如果修改后仍偶现容器找不到的问题，可以直接将微应用容器节点放到Route外部，保证容器永远存在于DOM中：

function App(props) {
  return (
    <div className="App">
      <Header></Header>
      <Router>
        {/* 容器直接声明，不依赖Route渲染 */}
        <div id="react-app"></div>
        <div id="react-app1"></div>
        <Switch>
          <Route exact path="/"></Route>
          {/* 其他路由逻辑 */}
        </Switch>
      </Router>
    </div>
  );
}

内容的提问来源于stack exchange，提问作者mgru1