webpack loader transforms plain react router configuration object defined in json/yaml file into react-router-config js module.
react-router-config provides one centralized routes configuration within react. However, the requirement to reference component classes directly in routes configuration limits its usage.
react-router-config-loader provides the option to define plain react routes configuration object in json/yaml file, by tramsforming path of component class into class reference and module import with the help of webpack.
By removing direct reference to component classes and code transformation, it opens much more possibile usage of the routes configuration, including but no limited to:
- Routes definition with no dependency, which can provides single source of truth of the routes to multiple modules, e.g. react SPA and express.js backend
- Ability to check validation of URL path in backend
- Ability to trace route of URL path in backend
- Customization to route configuration object, which can adds additional features to react-router-config
- Support to use relative path in routes configuration
- Support inherit properties available in child routes automatically
Use npm install to add devDependencies:
$ npm install --save-dev react-router-config-loaderreact-router-config-loader supports loading react-router configuration defined in json, yaml, and js file. Below configuration samples correspond to the sample provided by react-router-config.
Inline usage of loader is given in below examples. For other ways, refer to webpack documents for detail.
import routes from 'react-router-config-loader!./routes.json';[
{
"component": "./Root",
"routes": [
{
"path": "/",
"exact": true,
"component": "./Home"
},
{
"path": "/child/:id",
"component": "./Child",
"routes": [
{
"path": "/child/:id/grand-child",
"component": "./GrandChild"
}
]
}
]
}
]Chaining yaml-loader before react-router-config-loader to transform routes defined in yaml file.
import routes from 'react-router-config-loader!yaml-loader!./routes.yaml';- component: ./Root
routes:
- component: ./Home
path: /
exact: true
- component: ./Child
path: /child/:id
routes:
- component: ./GrandChild
path: /child/:id/grand-childRoutes configuration object can also be defined and exported from an js file (currently only using module.exports are supported).
import routes from 'react-router-config-loader!./routes.js';module.exports = [
{ component: './Root',
routes: [
{ path: '/',
exact: true,
component: './Home'
},
{ path: '/child/:id',
component: './Child',
routes: [
{ path: '/child/:id/grand-child',
component: './GrandChild'
}
]
}
]
}
]Both configuration fields defined in react-router-config, and additional fields including componentName, inheritProps are supported.
The core difference between react-router-config configuration and react-router-config-loader configuration is that, the component field is path from which to resolve the react component class instead of the component class.
component supports relative path (and absolute path) to resolve local components, and module path to resolve components from node modules. By default, relative path will be resolved using the context path unless componentsDir options is set.
If componentName field is not specified, the file name (without extention) is used as the name of the component.
Once specified, the value of componentName will be used as the import name of the component.
Absolute path-to-regrex path used to match for the component if relativePath is not set. Otherwise, relative path should be used.
When true, will only match if the path matches the URL exactly. See https://reacttraining.com/react-router/core/api/Route/exact-bool
When true, a path that has a trailing slash will only match a URL with a trailing slash. See https://reacttraining.com/react-router/core/api/Route/strict-bool.
Object whose properties will be assigned to both the current route, and all its children. Which will be available through the props.route. For example,
[
{
"component": "./Root",
"routes": [
{
"path": "/",
"exact": true,
"component": "./Home"
},
{
"path": "/child/:id",
"component": "./Child",
"parentProp": "parentProp",
"inheritProps": {
"inheritProp": "inheritProp"
},
"routes": [
{
"path": "/child/:id/grand-child",
"component": "./GrandChild",
"selfProp": "selfProp"
}
]
}
]
}
]will get below props.route for GrandChild component:
{
component: GrandChild,
path: '/child/:id/grand-child',
selfProp: 'selfProp',
inheritProp: 'inheritProp',
}Other fields are free to add into route object, which is also available via props.route inside the component.
Several options controls the behavior of the loader on how routes configuration object is transformed.
Once specified, this directory will be used as the context path with with component path are resolved.
Once set to true, all path in route are treated as relative path to its parents. For example, below is the corresponding configuration when relativePath equals true.
[
{
"component": "./Root",
"routes": [
{
"path": "/",
"exact": true,
"component": "./Home"
},
{
"path": "/child/:id",
"component": "./Child",
"routes": [
{
"path": "grand-child",
"component": "./GrandChild"
}
]
}
]
}
]
![greenkeeper[bot] avatar](https://avatars.githubusercontent.com/in/505?v=4 "greenkeeper[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent