alibaba / alibaba/ice

[RFC] 支持 icestark 动态路由渲染方案

Open
#4,516 0 comments 0 reactions 1 assignee Claimed by @maoxiaoke View on GitHub
Dominant language
TypeScript
Stars
18.6k
Forks
2.1k
PR merge metrics
No merged PRs in 30d

Description

## 背景

build-plugin-icestark 支持每次路由发生切换后,都需要请求后端的服务,以获取当前路由下微应用配置。

## 背景

有些用户不太希望获取一个完整的微应用配置,希望能够根据路由信息动态获取该配置。

## 方案设计

`build-plugin-icestark` 支持动态 `getApps`,使用方式如下:

```js
const appConfig = {
icestark: {
type: 'framework',
getApps: async ({ pathname, query, hash, routeType }) => {
return fetchAppConfig(path);
},
whenUpdateGetApps: true,
...
}
}

runApp(appConfig);
```

+ `getApps` 支持传入:
+ pathname
+ query
+ hash
+ routeType

+ `whenUpdateApps` 表示是否需要在 url change 的时候调用 getApps 获取当前微应用配置:
+ boolean:是否开启,true 会在任何 url 变化的时候调用
+ ({ pathname, query, hash, routeType }) => boolean: 函数方式,在用户自定义条件下调用

## 其他

1. 若 shouldGetAppsOnEveryUpdate 开启 true, 则默认在所有 url change 的节点(包括子应用下的路由)都会执行 getApps,会导致频繁调用

## 附录: 基于 AppRouter 动态路由渲染

```js
function App() {
const [appLoading, setLoading] = useState(false);
const [appConfig, setAppConfig] = useState(null);

const fetchAppConfig = async (...routeInfo) => {
setLoading(true);

// 这里自定义获取微应用配置逻辑
const config = await axios.get('/config');

setAppConfig(config)
setLoading(false);
}

useEffect(() => {
// fetch init app config by location information
fetchAppConfig();
},[]);

return (
loading-component}
ErrorComponent={() =>

error-component
}
onRouteChange={( pathname ) => fetchAppConfig(pathname)}
>
{
appConfig && (

)
}

{
appLoading && (
loading-component}
/>
)
}
}
/>

)
}
```

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.