运行时配置

优质

小牛编辑

122浏览

2023-12-01

为什么有运行时配置？

我们通过 .umirc.js 做编译时的配置，这能覆盖大量场景，但有一些却是编译时很难触及的。

比如：

在出错时显示个 message 提示用户
在加载和路由切换时显示个 loading
页面载入完成时请求后端，根据响应动态修改路由

这些在编译时就很难处理，或者不能处理了。

配置方式

umi 约定 src 目录下的 app.js 为运行时的配置文件。

+ src
  - app.js      # 运行时配置文件
- package.json

配置列表

patchRoutes

用于运行时修改路由。

参数：

routes: Array，路由配置

e.g. 添加一个 /foo 的路由，

export function patchRoutes(routes) {
  routes[0].unshift({
    path: '/foo',
    component: require('./routes/foo').default,
  });
}

可能的场景：

和 render 配合使用，请求服务端根据响应动态更新路由
修改全部路由，加上某个前缀
...

注：

同样适用约定式路由
直接修改 routes 就好，不要返回新的路由对象

render

用于改写把整个应用 render 到 dom 树里的方法。

参数：

oldRender， Function，原始 render 方法，需至少被调用一次

e.g. 延迟 1s 渲染应用，

export function render(oldRender) {
  setTimeout(oldRender, 1000);
}

可能的场景：

渲染应用之前做权限校验，不通过则跳转到登录页

onRouteChange

用于在初始加载和路由切换时做一些事情。

参数：

Object
- location：Object, history 提供的 location 对象
- routes: Array, 路由配置
- action: PUSH|POP|REPLACE|undefined，初次加载时为 undefined

e.g.

export function onRouteChange({ location, routes, action }) {
  bacon(location.pathname);
}

可能的场景：

埋点统计

注：

初次加载时也会执行，但 action 为 undefined

rootContainer

用于封装 root container，可以取一部分，或者外面套一层，等等。

参数：

container，ReactComponent，React 应用最上层的根组件

e.g.

export function rootContainer(container) {
  const DvaContainer = require('@tmp/DvaContainer').default;
  return React.createElement(DvaContainer, null, container);
}

可能的场景：

dva、intl 等需要在外层有个 Provider 的场景

modifyRouteProps

修改传给路由组件的 props。

参数：

props，Object，原始 props
Object
- route，Object，当前路由配置

e.g.

export function modifyRouteProps(props, { route }) {
  return { ...props, foo: 'bar' };
}

注：

需返回新的 props