UmiJS

Runtime Config

Why runtime configuration?

We do compile-time configuration via .umirc.js. These does cover most of the scenarios, but some are hard to achieve at compile time.

Such as：

  • Display message prompts to the user if error occurs.
  • Show loading states when loading and navigating between routes.
  • Fire request to backend when page is loaded, then modify the routes based on response.

These are difficult or even impossible to handle at compile time.

Configuration

umi convention is that src/app.js is the configuration file.

+ src
  - app.js      # runtime configuration file
- package.json

Available Configurations

patchRoutes

Used to modify routes at runtime.

Parameters：

  • routes: Array，routing configuration

e.g. Add route to /foo，

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

Usecases:

  • Used with render to request data from the server and dynamically update the route based on the response.
  • Modify all routes, by adding a prefix.
  • ...

Note：

  1. The same applies to agreed routing. (NOTE not really sure what that means)
  2. Mutate routes directly，do note return new route objects

render

Used to override the rendering of entire app to the DOM.

Parameters：

  • oldRender， Function，the initial render function，needs to be called at lease once.

e.g. Delay rendering of the app by 1s,

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

Usecases：

  1. Check permissions before rendering the app. Show login if not authorized.

onRouteChange

Used on initial load and route changes.

Parameters：

  • Object
    • location：Object, provided by history
    • routes: Array, routing configuration
    • action: PUSH|POP|REPLACE|undefined，undefined on first load.

e.g.

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

Usecases：

  1. Navigation analytics.

Note：

  1. Also runs on the first load，but action is undefined

rootContainer

Used to wrap the root container，you can take a part, or a layer outside and so on.

Parameters：

  • container，ReactComponent，React application root component

e.g.

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

Usecases：

  1. dva、intl, etc. need to have Provider in the outer layer.

modifyRouteProps

Modify the props passed to the routing component

Parameters：

  • props，Object，original props

  • Object

    • route，Object，current routing configuration

e.g.

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

Note：

  1. Has to return new props

← Block →