umi-plugin-runtime-routes
Modify routes generated by umi at runtime.
Install
yarn add umi-plugin-runtime-routes -D
Usage
Modifier
function
1. Define a routes 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; const envHelper = helpersenvHelper; { // Maybe in your case, you are not using "window.currentEnv" at runtime, this is just a sample const modifiedRoutes = ; return modifiedRoutes;}
routes
option in .umirc.js
2. Add extra information in 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 routes: path: '/' component: '../layouts/index' routes: path: '/user' redirect: '/user/login' env: 'foo' 'bar' path: '/user/login' redirect: './user/login' env: 'bar' ;
.umirc.js
3. Configure plugin in Configure this plugin in .umirc.js
.
// .umirc.js 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:
{ 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.
;
envHelper(routes, currentEnv)
This helper help you to modify routes by the application running environment.
1. Create modifier function
// routesModifier.js; { const modifiedRoutes = helpers; // 'foo' is current env return modifiedRoutes;}
2. Define routes:
// .umirc.js routes: /* ... */ env: 'foo' 'bar' // add 'env' array at each route ;
Utils
All of the utils are exported at utils
variable.
;
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; { const modifiedRoutes = utils; return modifiedRoutes;}