Routing Problem between main-App and sup-App

Hello!

I have a main-application (localhost:[e-mail]) (running with react):

import './App.css';
import { registerMicroApps, setDefaultMountApp, start } from 'qiankun';
import { addGlobalUncaughtErrorHandler } from 'qiankun';
import Header from './components/Header'

addGlobalUncaughtErrorHandler((event) => console.log(event));
function App(props) {

  registerMicroApps([
    {
      name: 'react app', // app name registered
      entry: '//localhost:3001',
      container: '#react-app',
      activeRule: '/react-app',
    },
    {
      name: 'vue app',
      entry: { scripts: ['//localhost:7100/main.js'] },
      container: '#yourContainer2',
      activeRule: '/yourActiveRule2',
    },
  ]);
  setDefaultMountApp('/react-app')
  start();


  return (
    <div className="App">
      <Header></Header>
    </div>
  );


}

export default App;

And i have a subApplication (localhost:[e-mail]) (running with react)

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-app' : '/'}>
      <h2>Sub-App</h2>
      </BrowserRouter>

    </div>
  );
}

export default App;

In the main application i render a component called <Header> which holds the logic for the navigation:

import React from "react";
import Styles from "./Header.module.css";
import Logo from "../assets/avocodo-white.png";
import { BrowserRouter, Link } from "react-router-dom";

const Header = (props) => {
//   const [activeLink, setActiveLink] = useState("");

//   const linkClickHandler = (event) => {
//     event.preventDefault();
//     const links = ["react-app"];

//     if (event.target.innerHTML.indexOf(links) !== -1) {
//       setActiveLink(event.target.innerHTML.indexOf(links));
//     }
//   };

  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">React-App</Link>
      </BrowserRouter>
    </div>
  );
};

export default Header;

---

I’m trying to make a SPA where the [e-mail] routes to the corresponding micro-application.

When i run the application as it is now i get:

Error: application ‘react app’ died in status LOADING_SOURCE_CODE: [qiankun]: Target container with #react-app not existed while react app loading!

I’ve gone through the FAQ-section of the qiankun-project, but can’t wrap my head around on how i can resolve this issue properly.

Can anyone help me out and tell me what needs to be done to resolve that?

Thank you in advance!

[mgrub1]

Update:

The routing seems to work better now, as the first link of the two is being opened when clicked on. But, if you change from Link1 to Link2 to route to the second micro-app, the application breaks with:

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

[github-actions[bot]]

Since the issue was labeled with Need Reproduction, but no response in 30 days. This issue will be close. If you have any questions, you can comment and reply. 由于该 issue 被标记为需要可复现步骤，却 30 天未收到回应。现关闭 issue，若有任何问题，可评论回复。