rerumaccusamus
Version:
The meta-framework suite designed from scratch for frontend-focused modern web development.
111 lines (88 loc) • 2.92 kB
Markdown
---
sidebar_position: 4
title: 加载子应用
---
在微前端中分为两种加载子应用的方式：
1. **子应用组件** 获取到每个子应用的组件，之后就可以像使用普通的 React 组件一样渲染微前端的子应用。
2. **集中式路由** 通过集中式的路由配置，自动根据当前页面 pathname 激活渲染对应的子应用。
## 子应用组件
使用 `useModuleApps` API 可以获取到各个子应用的组件。结合 `router`，可以自控式的根据不同的路由渲染不同的子应用。
假设我们的子应用列表配置如下：
```js title="modern.config.js"
export default defineConfig({
runtime: {
masterApp: {
manifest: {
modules: [
{
name: "Dashboard",
entry: "http://localhost:8081"
},
{
name: "TableList",
entry: "http://localhost:8082"
}
]
}
}
}
}
```
编辑主应用 `App.tsx` 文件如下：
```tsx title=主应用：App.tsx
import { useModuleApps } from '@modern-js/runtime';
import { Route, Switch } from '@modern-js/runtime/router';
function App() {
const { Dashboard, TableList } = useModuleApps();
return <div>
<Switch>
<Route path='/dashboard'>
<Dashboard />
</Route>
<Route path='/tablelist'>
<TableList />
</Route>
</ Switch>
</div>
}
```
这里通过 `Route` 组件自定义了 **DashBoard** 的激活路由为 **/dashboard**， **TableList** 的激活路由为 **/tablelist**。
## 集中式路由
**集中式路由** 是将子应用的激活路由集中配置的方式。我们给子应用列表信息添加 `activeWhen` 字段来启用 **集中式路由**。
```js title="modern.config.js"Å {8,13}
export default defineConfig({
runtime: {
masterApp: {
manifest: {
modules: [
{
name: "Dashboard",
activeWhen: '/dashboard',
entry: "http://localhost:8081"
},
{
name: TableList,
activeWhen: '/tablelist',
entry: "http://localhost:8082"
}
]
}
}
}
}
```
然后在主应用中使用 `useModuleApp` API 来获取 `MApp` 在主应用渲染。
```tsx title=主应用：App.tsx
import { useModuleApp } from '@modern-js/runtime';
function App() {
const MApp = useModuleApp();
return <div>
<MApp />
</div>
}
```
这样启动应用后，访问 `/dashboard` 路由，会渲染 `Dashboard` 子应用，访问 `/tablelist` 路由，会渲染 `TableList` 子应用。
## 两种模式混用
当然 **子应用组件** 和 **集中式路由** 是可以混合使用的。
- 一部分子应用作为 **子应用组件** 激活，另外一部分作为 **集中式路由** 激活。
- 一部分子应用既可以作为 **集中式路由** 激活，也可以作为 **子应用组件** 激活。