chore: react18-main add router

packages/create-qiankun/template/react18-main/.env.ejs

@@ -1,4 +1,4 @@
 SKIP_PREFLIGHT_CHECK=true
-BROWSER=none
+BROWSER=true
 PORT=<%= port %>
 WDS_SOCKET_PORT=<%= port %>

packages/create-qiankun/template/react18-main/package.json.ejs

@@ -15,6 +15,7 @@
     "antd": "^5.12.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.15.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4",
     "qiankun":"<%= qiankun %>",

packages/create-qiankun/template/react18-main/src/About.js

@@ -0,0 +1,13 @@
+import { Link } from 'react-router-dom';
+import './App.css';
+
+function About() {
+  return (
+    <div className="App">
+      <h2>About</h2>
+      <Link to="/">Link to home</Link>
+    </div>
+  );
+}
+
+export default About;

packages/create-qiankun/template/react18-main/src/App.js

@@ -1,31 +1,30 @@
-import './App.css';
-import subApplication from './microApp/subs.json';
-import { loadMicroApp } from 'qiankun';
-import { useState } from 'react';
-import { Menu } from 'antd';
-
-const menuItems = subApplication.map(({ name }) => ({ key: name, label: name }))
+import "./App.css";
+import subApplication from "./microApp/subs.json";
+import { useState, useCallback } from "react";
+import { Menu } from "antd";
+import { MicroApp } from "@qiankunjs/react";
+import { useNavigate } from "react-router-dom";
+
+const menuItems = subApplication.map(({ name }) => ({
+  key: name,
+  label: name,
+}));
 
 function App() {
-  const [preLoadApp, setPreLoadApp] = useState(null);
-
-  async function changeRouterAndLoadApp({ key }) {
-    const app = subApplication.find(item => item.name === key)
-    if (!app || preLoadApp?.name === app.name) return;
+  const [curRenderMicroApp, setApp] = useState(null);
+  const navigate = useNavigate();
 
-    if (preLoadApp) {
-      await preLoadApp.unmount();
-    }
+  const changeRouterAndLoadApp = useCallback(({ key }) => {
+    const app = subApplication.find((item) => item.name === key);
+    if (!app || curRenderMicroApp?.name === app.name) return;
 
-    const microApp = loadMicroApp({
+    setApp({
       name: app.name,
       entry: app.entry,
-      container: document.querySelector('#subapp-container'),
     });
-    setPreLoadApp(microApp)
 
-    window.history.pushState(null, '', app.activeRule);
-  }
+    navigate(app.activeRule);
+  }, []);
 
   return (
     <div className="app">
@@ -34,11 +33,18 @@ function App() {
         <Menu
           mode="inline"
           onSelect={changeRouterAndLoadApp}
-          style={{ width: '100%', height: '100%' }}
+          style={{ width: "100%", height: "100%" }}
           items={menuItems}
         />
       </div>
-      <div id="subapp-container"></div>
+      <div id="subapp-container">
+        {curRenderMicroApp && (
+          <MicroApp
+            name={curRenderMicroApp.name}
+            entry={curRenderMicroApp.entry}
+          ></MicroApp>
+        )}
+      </div>
     </div>
   );
 }

packages/create-qiankun/template/react18-main/src/index.js

@@ -1,17 +1,12 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "./index.css";
+import router from "./router/index";
+import { RouterProvider } from "react-router-dom";
+const root = ReactDOM.createRoot(document.getElementById("root"));
 
-const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
-    <App />
+    <RouterProvider router={router} />
   </React.StrictMode>
 );
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();

packages/create-qiankun/template/react18-main/src/router/index.js.ejs

@@ -0,0 +1,47 @@
+import React, { Suspense } from "react";
+import Home from "../App.js";
+<% if (mainRoute === 'hash') { -%>
+import { createHashRouter } from "react-router-dom";
+<% } -%>
+
+<% if (mainRoute === 'history') { -%>
+import { createBrowserRouter } from "react-router-dom";
+<% } -%>
+
+
+const AsyncComponent = ({ load }) => {
+  const Component = React.lazy(load);
+  return (
+    <Suspense>
+      <Component />
+    </Suspense>
+  );
+};
+
+const routes = [
+  {
+    path: "/",
+    element: <Home />,
+  },
+  {
+    path: "about",
+    element: <AsyncComponent load={() => import("../About.js")} />,
+  },
+  {
+    path: "*",
+    element: <Home />,
+  },
+];
+const opts = {
+  basename: "/",
+};
+
+<% if (mainRoute === 'hash') { -%>
+const router = createHashRouter(routes, opts);
+<% } -%>
+
+<% if (mainRoute === 'history') { -%>
+const router = createBrowserRouter(routes, opts);
+<% } -%>
+
+export default router;

packages/create-qiankun/template/vue3-main/src/App.vue

@@ -2,7 +2,7 @@
   <el-container class="layout-container">
     <el-aside width="250px">
       <el-scrollbar>
-        <el-menu background-color="#f5f5f5">
+        <el-menu background-color="#fff">
           <el-menu-item
             :index="app.name"
             v-for="(app, index) in childApps"
@@ -15,7 +15,9 @@
     </el-aside>
 
     <el-container>
-      <el-header> </el-header>
+      <el-header style="background-color: #fff; text-align: center">
+        <h2>{{ curRenderMicroApp.name }}</h2>
+      </el-header>
 
       <el-main>
         <el-scrollbar>

packages/create-qiankun/template/vue3-main/src/main.js.ejs

@@ -9,14 +9,20 @@ import { createRouter, createWebHashHistory } from "vue-router";
 import { createRouter, createWebHistory } from "vue-router";
 <% } -%>
 
+<% if (mainRoute === 'hash') { -%>
+const router = createRouter({
+  history:createWebHashHistory(process.env.BASE_URL),
+  routes
+})
+<% } -%>
+
+<% if (mainRoute === 'history') { -%>
 const router = createRouter({
-  history:<% if (mainRoute === 'hash') { -%>
-createWebHashHistory(process.env.BASE_URL),
-      <% } -%>
-      <% if (mainRoute === 'history') { -%>
-createWebHistory(process.env.BASE_URL),
-      <% } -%>
-  routes,
-});
+  history:createWebHistory(process.env.BASE_URL),
+  routes
+})
+<% } -%>
+
+
 
 createApp(App).use(store).use(router).mount("#app");