diff --git a/packages/create-qiankun/template/react18-main/.env.ejs b/packages/create-qiankun/template/react18-main/.env.ejs index c6277a5ff..de0aa5b12 100644 --- a/packages/create-qiankun/template/react18-main/.env.ejs +++ b/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 %> diff --git a/packages/create-qiankun/template/react18-main/package.json.ejs b/packages/create-qiankun/template/react18-main/package.json.ejs index bbc5b89b9..f4d081dbe 100644 --- a/packages/create-qiankun/template/react18-main/package.json.ejs +++ b/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 %>", diff --git a/packages/create-qiankun/template/react18-main/src/About.js b/packages/create-qiankun/template/react18-main/src/About.js new file mode 100644 index 000000000..57ff88ed0 --- /dev/null +++ b/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 ( +
+

About

+ Link to home +
+ ); +} + +export default About; diff --git a/packages/create-qiankun/template/react18-main/src/App.js b/packages/create-qiankun/template/react18-main/src/App.js index b617b316e..fb9a1b6bc 100644 --- a/packages/create-qiankun/template/react18-main/src/App.js +++ b/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 (
@@ -34,11 +33,18 @@ function App() {
-
+
+ {curRenderMicroApp && ( + + )} +
); } diff --git a/packages/create-qiankun/template/react18-main/src/index.js b/packages/create-qiankun/template/react18-main/src/index.js index d563c0fb1..005d4df67 100644 --- a/packages/create-qiankun/template/react18-main/src/index.js +++ b/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( - + ); - -// 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(); diff --git a/packages/create-qiankun/template/react18-main/src/router/index.js.ejs b/packages/create-qiankun/template/react18-main/src/router/index.js.ejs new file mode 100644 index 000000000..6b46c1c80 --- /dev/null +++ b/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 ( + + + + ); +}; + +const routes = [ + { + path: "/", + element: , + }, + { + path: "about", + element: import("../About.js")} />, + }, + { + path: "*", + element: , + }, +]; +const opts = { + basename: "/", +}; + +<% if (mainRoute === 'hash') { -%> +const router = createHashRouter(routes, opts); +<% } -%> + +<% if (mainRoute === 'history') { -%> +const router = createBrowserRouter(routes, opts); +<% } -%> + +export default router; diff --git a/packages/create-qiankun/template/vue3-main/src/App.vue b/packages/create-qiankun/template/vue3-main/src/App.vue index 46edde1f4..dc4adcfe6 100644 --- a/packages/create-qiankun/template/vue3-main/src/App.vue +++ b/packages/create-qiankun/template/vue3-main/src/App.vue @@ -2,7 +2,7 @@ - + - + +

{{ curRenderMicroApp.name }}

+ diff --git a/packages/create-qiankun/template/vue3-main/src/main.js.ejs b/packages/create-qiankun/template/vue3-main/src/main.js.ejs index e31e17a28..07f3ef38a 100644 --- a/packages/create-qiankun/template/vue3-main/src/main.js.ejs +++ b/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");