[RFC] 支持 icestark 动态路由渲染方案
- 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={() =>
onRouteChange={( pathname ) => fetchAppConfig(pathname)}
>
{
appConfig && (
)
}
{
appLoading && (
loading-component}
/>
)
}
}
/>
)
}
```
Contributor guide
Assessment
This issue has not been assessed yet.