https://github.com/mickeyjsx/umi-plugin-runtime-routes
☀️ Modify routes generated by umi at runtime.
https://github.com/mickeyjsx/umi-plugin-runtime-routes
plugin routes runtime umi
Last synced: over 1 year ago
JSON representation
☀️ Modify routes generated by umi at runtime.
- Host: GitHub
- URL: https://github.com/mickeyjsx/umi-plugin-runtime-routes
- Owner: mickeyjsx
- License: mit
- Created: 2019-08-15T11:50:02.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2022-12-09T22:38:08.000Z (over 3 years ago)
- Last Synced: 2025-03-17T14:39:45.036Z (over 1 year ago)
- Topics: plugin, routes, runtime, umi
- Language: TypeScript
- Homepage:
- Size: 894 KB
- Stars: 1
- Watchers: 4
- Forks: 0
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# umi-plugin-runtime-routes
Modify routes generated by umi at runtime.
## Install
```bash
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 modified`routes`.
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:
```javascript
// 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`:
```javascript
// .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`.
```javascript
// .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:
```javascript
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.
```javascript
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
```javascript
// 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:
```javascript
// .umirc.js
export default {
routes: [
{ /* ... */, env: ['foo', 'bar'] } // add 'env' array at each route
]
};
```
## Utils
All of the utils are exported at `utils` variable.
```javascript
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:
```javascript
// 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;
}
```
## License
[MIT License](https://github.com/mickeyjsx/umi-plugin-runtime-routes/blob/master/LICENSE)