0

I am using Qiankun as a micro-frontend-servlet and need someone, who has a bit of knowledge around that tool, who can help me with the following problem:

My Master-Application, as well as all Micro-Applications run on a react-app, which have been created via "npx create-react-app".

It seems to me, that the routes defined in the -Component seem to work once. To be specific:

If i click on one -Component redirecting the browser to "/react-app" , this works just fine. If i then, and that is the crucial part of that whole problem, click on the other link, to the other micro-application. The whole page goes blank and in the web-console you'll find the following error:

Uncaught Error: application 'react app1' died in status LOADING_SOURCE_CODE: [qiankun]: Target container with #react-app1 not existed while react app1 loading!

There's an FAQ-section on the site just covering this issue, but i can't wrap my head around that on how it is done the proper way.

Qiankun-FAQ's

Master-Application:

(...)

function App(props) {
  registerMicroApps([
    {
      name: "react app", // app name registered
      entry: "//localhost:3001",
      container: "#react-app",
      activeRule: "/react-app",
    },
    {
      name: "react app1", // app name registered
      entry: "//localhost:3002",
      container: "#react-app1",
      activeRule: "/react-app1",
    },
  ]);

    start()

  return (
    <div className="App">
      {/* <div id="react-app"></div> */}
      <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-Component, having the Main-Routes configured:

const Header = (props) => {

  return (
    <div className={Styles.Header}>
      <img alt="Avocodo Logo" src={Logo}></img>
      <h1>Main Application</h1>
      <BrowserRouter /*basename={window.__POWERED_BY_QIANKUN__ ? '/react-app' : '/'}*/>
        <Link to="/react-app">Sub-App</Link>
        <Link to="/react-app1">Sub-App1</Link>
      </BrowserRouter>
    </div>
  );
};

export default Header;

One of the two identical Micro-Applications:

import React from 'react'
import { BrowserRouter } from 'react-router-dom'
import './App.css';

function App() {
  return (
    <div className="App">
      <BrowserRouter basename={window.__POWERED_BY_QIANKUN__ ? '/react-app1' : '/'}>
      <h2>Sub-App2</h2>
      </BrowserRouter>

    </div>
  );
}

export default App;

Has anyone ever worked w/Qiankun and can help me on how to get the issue solved?

Thankful for any hints!

mgru1
  • 29
  • 1
  • 6

1 Answers1

0
      <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>

the divs with IDs "react-app" and "react-app1" should be kept outside the switch tag. They need to be available when the micro-app is being registered.

But in your case, the div is available only if the route is selected. So before you navigate another route, qiankun tries to register the micro-app to the dom element, which has not been added yet.

Madhuri
  • 3
  • 4