微前端 - qiankun 入门到实践——第五节：主应用配置

在本节中，我们将详细介绍如何配置主应用，以便能够正确地加载和管理多个子应用。我们将继续使用React 18、TypeScript和Qiankun。

配置项目结构

首先，我们确保主应用的文件结构清晰明了，以便后续配置和维护。主应用的文件结构可能如下所示：

main-app/
├── public/
├── src/
│   ├── components/
│   │   ├── Navbar.tsx
│   ├── pages/
│   │   ├── Home.tsx
│   │   ├── About.tsx
│   ├── App.tsx
│   ├── main.tsx
│   ├── store.ts
├── index.html
├── package.json
└── vite.config.ts

配置React Router

主应用将使用React Router进行路由管理。首先，确保已安装react-router-dom：

npm install react-router-dom

然后，在src/main.tsx中设置基本的React Router配置：

// src/main.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import App from './App';
import './index.css';

const container = document.getElementById('root');
const root = ReactDOM.createRoot(container!);

root.render(
  <React.StrictMode>
    <Router>
      <Routes>
        <Route path="/*" element={<App />} />
      </Routes>
    </Router>
  </React.StrictMode>
);

在src/App.tsx中，设置应用的导航栏和路由：

// src/App.tsx
import React, { useEffect } from 'react';
import { Link, Route, Routes } from 'react-router-dom';
import { registerMicroApps, start } from 'qiankun';
import Home from './pages/Home';
import About from './pages/About';

const App = () => {
  useEffect(() => {
    registerMicroApps([
      {
        name: 'sub-app-1',
        entry: '//localhost:7100', // 子应用入口
        container: '#subapp-container',
        activeRule: '/subapp1',
      },
      {
        name: 'sub-app-2',
        entry: '//localhost:7200',
        container: '#subapp-container',
        activeRule: '/subapp2',
      },
    ]);
    start();
  }, []);

  return (
    <div>
      <nav>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/about">About</Link></li>
          <li><Link to="/subapp1">Sub App 1</Link></li>
          <li><Link to="/subapp2">Sub App 2</Link></li>
        </ul>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/subapp1/*" element={<div id="subapp-container"></div>} />
        <Route path="/subapp2/*" element={<div id="subapp-container"></div>} />
      </Routes>
    </div>
  );
};

export default App;

添加页面组件

创建一些简单的页面组件，确保主应用正常工作：

// src/pages/Home.tsx
const Home = () => (
  <div>
    <h1>Home Page</h1>
  </div>
);

export default Home;

// src/pages/About.tsx
const About = () => (
  <div>
    <h1>About Page</h1>
  </div>
);

export default About;

配置Qiankun

我们已经在src/App.tsx中配置了Qiankun的基本设置。为了确保主应用能够正确加载子应用，我们需要进行以下配置：

1. 注册子应用

使用registerMicroApps方法注册子应用，并设置它们的入口、容器和激活规则。

1. 启动Qiankun

使用start方法启动Qiankun，这将开始监听路由变化，并在需要时加载子应用。

// src/App.tsx
import React, { useEffect } from 'react';
import { Link, Route, Routes } from 'react-router-dom';
import { registerMicroApps, start } from 'qiankun';
import Home from './pages/Home';
import About from './pages/About';

const App = () => {
  useEffect(() => {
    registerMicroApps([
      {
        name: 'sub-app-1',
        entry: '//localhost:7100', // 子应用入口
        container: '#subapp-container',
        activeRule: '/subapp1',
      },
      {
        name: 'sub-app-2',
        entry: '//localhost:7200',
        container: '#subapp-container',
        activeRule: '/subapp2',
      },
    ]);
    start();
  }, []);

  return (
    <div>
      <nav>
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/about">About</Link></li>
          <li><Link to="/subapp1">Sub App 1</Link></li>
          <li><Link to="/subapp2">Sub App 2</Link></li>
        </ul>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/subapp1/*" element={<div id="subapp-container"></div>} />
        <Route path="/subapp2/*" element={<div id="subapp-container"></div>} />
      </Routes>
    </div>
  );
};

export default App;

配置状态管理

为了实现全局状态管理，我们使用Redux Toolkit进行配置。首先，确保安装Redux Toolkit和React Redux：

npm install @reduxjs/toolkit react-redux

创建一个Redux store，并在src/store.ts中配置：

// src/store.ts
import { configureStore } from '@reduxjs/toolkit';
import { Provider } from 'react-redux';
import userReducer from './slices/userSlice';

const store = configureStore({
  reducer: {
    user: userReducer,
  },
});

export default store;

在src/main.tsx中引入全局状态管理：

// src/main.tsx
import { Provider } from 'react-redux';
import store from './store';

root.render(
  <React.StrictMode>
    <Provider store={store}>
      <Router>
        <Routes>
          <Route path="/*" element={<App />} />
        </Routes>
      </Router>
    </Provider>
  </React.StrictMode>
);

总结

通过本节内容，我们详细介绍了如何配置主应用以加载和管理多个子应用。我们配置了React Router进行路由管理，并使用Qiankun注册和启动子应用。我们还介绍了如何配置全局状态管理。下一步，我们将继续探索子应用的具体配置和实现。