Umi-plugin-runtime-routes NPM

umi-plugin-runtime-routes

Modify routes generated by umi at runtime.

Install

yarn add umi-plugin-runtime-routes -D

Usage

1. Define a routes `Modifier` function

Routes Modifier is a function used for modifying routes at runtime, its parameter is routes which is generated by umi, and return value should be the modifiedroutes.

You could define Modifier by yourself, also this plugin provides some built-in helper functions and utils to help you to create Modifier easier.

For example, pick the envHelper from the built-in helper functions to create our sample Modifier:

// routesModifer.js
import { helpers } from 'umi-plugin-runtime-routes';

const envHelper = helpers.envHelper;

export default function(routes) {
  // Maybe in your case, you are not using "window.currentEnv" at runtime, this is just a sample
  const modifiedRoutes = envHelper(routes, window.currentEnv);
  
  return modifiedRoutes;
}

2. Add extra information in `routes` option in `.umirc.js`

The added info will be passed at runtime to help you creating Modifer to modify routes, there is no limitation about how to add these info. In the example, the envHelper is picked, so let's add some environment info in routes:

// .umirc.js

export default {
  routes: [
    {
      path: '/',
      component: '../layouts/index',
      routes: [
        { path: '/user', redirect: '/user/login', env: ['foo', 'bar'] },
        { path: '/user/login', redirect: './user/login', env: ['bar'] },
      ],
    },
  ],
};

3. Configure plugin in `.umirc.js`

Configure this plugin in .umirc.js.

// .umirc.js

export default {
  routes: [/* ... */];
  plugins: ['umi-plugin-runtime-routes', { modifier: 'path/to/routesModifier' }],
};

Options

options.modifier

options.modifier is a relative path string to the Modifier module, the base path is current working directory.

Modifer

A function used for modifying routes at runtime, like this:

function routesModifier(routes) {
  const modifiedRoutes = // ... modify routes
  return modifiedRoutes;
}

To help you create Modifier function easier, this plugin provides some built-in helper functions and some utils, see it at below.

Helpers

All of the built-in helpers are exported at helpers variable.

import { helpers } from 'umi-plugin-runtime-routes';

envHelper(routes, currentEnv)

This helper help you to modify routes by the application running environment.

1. Create modifier function

// routesModifier.js
import { helpers } from 'umi-plugin-runtime-routes';

function routesModifier(routes) {
  const modifiedRoutes = helpers.envHelper(routes, 'foo'); // 'foo' is current env
  return modifiedRoutes;
}

2. Define routes:

// .umirc.js

export default {
  routes: [
    { /* ... */, env: ['foo', 'bar'] } // add 'env' array at each route
  ]
};

Utils

All of the utils are exported at utils variable.

import { utils } from 'umi-plugin-runtime-routes';

routesFilter(routes, callback)

When you are creating the Modifier function by yourself, you need to do some works to iterate routes generated by umi, then return a new routes, this util helps you to automatically iterate routes and return the new routes, you just need to pass a filter callback to indicate if single route need to be preserved.

The first parameter is routes, the second parameter is the filter callback, when the return value of callback is true, the handling route is preserved, or the route will be deleted.

You can create the modifier like this:

// routesModifier.js
import { utils } from 'umi-plugin-runtime-routes';

export default function(routes) {
  const modifiedRoutes = utils.routesFilter(routes, (route) => {
    // return true or false to do the filter
  });
  
  return modifiedRoutes;
}