react-router-kit v0.2.0
react-router-kit
Router toolkits for React Router v4, includes:
- Router config supports inexplicit route
- Base Route
Installation
npm i -S react-router-kit
import {
renderRoutes,
BRoute
} from 'react-router-kit';
Router config using renderRoutes
/**
* renderRoutes
*
* @param {Object} rootConfig root routes config
* @param {?React.Component=} rootConfig.componnet associate
* @param {string=} rootConfig.url url of the route
* @param {string=} rootConfig.path path of the route
* @param {React.Component=} rootConfig.Route `<Route>` used for the route, useful in custom base Route or auth route in your project
* @param {Array=} rootConfig.subRoutes sub routes
* @param {boolean=} rootConfig.isSwitch is wrapped in <Switch>
* @param {boolean=} rootConfig.isRedirect is include a <Redirect> at the end of routes, default redirect to the first route of same level
* @param {number=} level level mainly used for `key`
* @return {React.Component}
*/
function renderRoutes() {}
Inside rootConfig
, you can also include your own attributes, like title
, which may be used in Sidebar render.
Usage
Without sub routes, generating a series of flat top level routes
const routesConfig = {
subRoutes: [
{
title: 'top1',
url: `${props.match.url}/top1`,
path: `${props.match.path}/top1`,
component: Top1,
Route: BRoute
},
{
title: 'top2',
url: `${props.match.url}/top2`,
path: `${props.match.path}/top2`,
component: Top2,
Route: BRoute
}
],
isSwitch: true,
isRedirect: true
};
Output:
{/* depends on isSwitch */}
<Switch>
<Route
path="/top1"
component={Top1}
/>
<Route
path="/top2"
component={Top2}
/>
{/* depends on isRedirect */}
<Redirect
to="/top1"
/>
<Switch>
With sub routes
Including inexplicit route
For inexplicit route, the component
shoud be null
.
If the component === null
route will be treated as inexplicit route.
The corresponding component will be generated by the config of subRoutes
.
const routesConfig = {
subRoutes: [
{
title: 'top1',
url: `${props.match.url}/top1`,
path: `${props.match.path}/top1`,
Route: BRoute,
component: null,
subRoutes: [
{
title: 'top1-sub1',
url: `${props.match.url}/top1/sub1`,
path: `${props.match.path}/top1/sub1`,
component: Sub1,
Route: BRoute
}
]
},
{
title: 'top2',
url: `${props.match.url}/top2`,
path: `${props.match.path}/top2`,
Route: BRoute,
component: Top2
}
],
isSwitch: true,
isRedirect: true
};
Output:
<Switch>
<Route
path="/top1"
{/* generated by the config */}
component={props => {
<Switch>
<Route
path="/top1/sub1"
component={Sub1}
/>
// for inexplicit route, <Redirect> is required
<Redirect
to="/top1/sub1"
/>
</Switch>
}}
/>
<Route
component={Top2}
/>
<Redirect
to="/top1"
/>
</Switch>
Without inexplicit route
const routesConfig = {
subRoutes: [
{
title: 'top1',
url: `${props.match.url}/top1`,
path: `${props.match.path}/top1`,
Route: BRoute,
component: Top1,
subRoutes: [
{
title: 'top1-sub1',
url: `${props.match.url}/top1/sub1`,
path: `${props.match.path}/top1/sub1`,
component: Sub1,
Route: BRoute
}
]
}
],
isSwitch: true,
isRedirect: true
};
Output:
<Switch>
<Route
path="/top1"
component={Top1}
/>
<Redirect
to="/top1"
/>
</Switch>
In this case, the subRoutes
of top1
will be passed to the <Route>
of top1
in props.
You should implement the <Route>
login yourself in <Top1>
component.
Except that, you should use a custom <Route>
(for example the <Broute>
in this projext), in order to pass the subRoutes
from <Route>
to <Top1>
.
中文版本
renderRoutes
: 用于根据 config 生成 routes
/**
* renderRoutes
*
* @param {Object} rootConfig root routes config
* @param {?React.Component=} rootConfig.componnet 可选,可为 null,如果没有 component,代表该层级无 route 意义,仅需要考虑是否 needSwitch 和 needRedirect
* @param {string=} rootConfig.url 可选,如果有 component 时必选,代表该 route 层的 url
* @param {string=} rootConfig.path 可选,如果有 component 时必选,代表该 route 层的 path
* @param {React.Component=} rootConfig.Route 可选,如果有 component 时必选,用于渲染该层 route 的 Component
* @param {Array=} rootConfig.subRoutes 可选,如果有则表示有嵌套 routes
* @param {boolean=} rootConfig.isSwitch 在 subRoutes 中且 component 为 null 时 无效
* @param {boolean=} rootConfig.isRedirect 在 subRoutes 中且 component 为 null 时 无效,如果为 true,redirect 到同级的第一个 route
* @param {number=} level 层级,用于 key
* @return {React.Component}
*/
function renderRoutes() {}
rootConfig
中除了以上配置外可以新增自定义字段,比如 title
等,用于 Sidebar 等场景的渲染啊。
使用
无 sub routes 场景,生成一列扁平的 top level route
const routesConfig = {
subRoutes: [
{
title: 'top1',
url: `${props.match.url}/top1`,
path: `${props.match.path}/top1`,
component: Top1,
Route: BRoute
},
{
title: 'top2',
url: `${props.match.url}/top2`,
path: `${props.match.path}/top2`,
component: Top2,
Route: BRoute
}
],
isSwitch: true,
isRedirect: true
};
返回
// 会根据 isSwitch 判断是否在外层加上 <Switch>
<Switch>
<Route
path="/top1"
component={Top1}
/>
<Route
path="/top2"
component={Top2}
/>
// 会根据 isRedirect 判断是否在最后加上 <Redirect>
<Redirect
to="/top1"
/>
<Switch>
有 sub routes 场景
有一级不需要显式展现
如果有不需要显式展现的层级,设定该层级的 component:null
对于 component:null
的层级,会根据 subRoutes
自动生成该层级的 component 用于渲染
const routesConfig = {
subRoutes: [
{
title: 'top1',
url: `${props.match.url}/top1`,
path: `${props.match.path}/top1`,
Route: BRoute,
component: null,
isVisitable: false,
subRoutes: [
{
title: 'top1-sub1',
url: `${props.match.url}/top1/sub1`,
path: `${props.match.path}/top1/sub1`,
component: Sub1,
Route: BRoute
}
],
// 虽然在这种情况下无意义,但建议声明,方便从 config 中了解结果
isSwitch: true,
isRedirect: true
},
{
title: 'top2',
url: `${props.match.url}/top2`,
path: `${props.match.path}/top2`,
Route: BRoute,
component: Top2
}
],
isSwitch: true,
isRedirect: true
};
返回
// 会根据 isSwitch 判断是否在外层加上 <Switch>
<Switch>
<Route
path="/top1"
component={props => {
// 这里的 Switch 是必须的
<Switch>
<Route
path="/top1/sub1"
component={Sub1}
/>
// 因为不需要显式,所以也必须 redirect
<Redirect
to="/top1/sub1"
/>
</Switch>
}}
/>
<Route
component={Top2}
/>
// 会根据 isRedirect 判断是否在最后加上 <Redirect>
<Redirect
to="/top1"
/>
</Switch>
每个层级都需要展现
只要每层的 component 都不会 null 即可
const routesConfig = {
subRoutes: [
{
title: 'top1',
url: `${props.match.url}/top1`,
path: `${props.match.path}/top1`,
Route: BRoute,
component: Top1,
subRoutes: [
{
title: 'top1-sub1',
url: `${props.match.url}/top1/sub1`,
path: `${props.match.path}/top1/sub1`,
component: Sub1,
Route: BRoute
}
],
// 虽然在这种情况下无意义,但建议声明,方便从 config 中了解结果
isSwitch: true,
isRedirect: true
}
],
isSwitch: true,
isRedirect: true
};
返回
// 会根据 isSwitch 判断是否在外层加上 <Switch>
<Switch>
<Route
path="/top1"
component={Top1}
/>
// 会根据 isRedirect 判断是否在最后加上 <Redirect>
<Redirect
to="/top1"
/>
</Switch>
在这种情况下,top1 的 subRoutes 会作为 props
传递给 Top1 的 <Route>
,用户可以通过自定义 Route
来实现向下层 component 传递 subRoutes。
Route 的实现可以参考项目中的 BRoute
。
相比 react-router-config 的优势
可以支持不需要显式展现的 sub routes