React路由传参,路由配置
const RouteConfig = [
{
path: 'first',
component: First,
name: '第一个路由',
routes: [
{
path: '1',
component: ChildOne,
name: '1-1'
}
]
},
{
path: 'second',
component: Second,
name: '第二个路由'
}
]
解释:
- 部件是组件;
- 路径是该组件对应的URL;
- 名非必须,这里是为了省事,自动生成链接标签的描述文字才加的;
- 路由可选,是该组件的子组件的路由信息具体来说,就是将这个值传给路由的子组件,然后子组件就可以拿这个生成自己的子路由信息了。
单纯看这个比较麻烦,我们先来看一个函数吧:
const createRouter = (routes, props) => (
<Router>
<div>
{/* 自动生成 Link 标签 */}
{createLink(routes, props)}
<hr/>
{/* 自动生成 Route 标签 */}
{createRoute(routes, props)}
</div>
</Router>
)
createRouter(RouteConfig, props)
这个函数干了三件事:
- 创建了一个路由器标签;
- 根据路由(来源于上面的路由配置表),自动生成了多个链接标签;
- 以及多个路由标签;
预期上,这两个生成标签的函数,他们生成的链接标签和路径标签是一一对应的;
然后我们再分别看这两个生成函数,先看第一个生成链接标签的:
const createLink = (routes, props) => (
<ol>
{
routes.map(route => (
<li key={route.path}>
<Link to={`${props.match.url}/${route.path}`}>{route.name}</Link>
</li>
))
}
</ol>
)
注意,createLink
传入的第一个参数,是一个数组(参考上面的 RouteConfig
变量);
遍历这个数组,生成一个李标签,内包裹一个链接标签,其以前属性是当前的url(props.match.url
),后面加上路由路径 route.path
,描述文字就是 route.name
。
示例(映射返回数组的一个元素):
<li key='first'>
<Link to={`/first`}>第一个路由</Link>
</li>
最后结果就是自动生成了导航栏。
然后我们再看另外一个生成路由标签的函数:
const createRoute = (routes, props) => (
<React.Fragment>
{routes.map((route, i) => {
let obj = {
key: i,
...route,
path: `${props.match.url}/${route.path}`,
component: props => {
let obj = {routes: route.routes, ...props}
return <route.component {...obj}/>
}
}
return <Route {...obj}/>
})}
</React.Fragment>
)
懂了上面那个后,这个自然而言也很容易懂了。
遍历路线,取出组分属性(即该路径对应的组件),
将当前子路由的路由配置表,如下:
routes: [
{
path: '1',
component: ChildOne,
name: '1-1'
}
]
混合到路由信息里(见 obj.component
属性,如果看不懂,请参考上面【7】中,部件的属性是一个函数的那个示例)。
这样,对应的子组件,就可以拿到路由配置表中,该组件的子路由信息了。
具体举例来说,就是首先这个组件,可以从道具里取出以下数据:
routes: [
{
path: '1',
component: ChildOne,
name: '1-1'
}
]
因此,子组件可以继续调用上面两个函数,来自动生成链接标签,和路由标签。
简单总结一下上面的过程:
- 调用函数createRouter,传参路由配置表;
- createRouter函数会调用自动生成链接标签和自动生成路由标签的函数;
- 建立连结函数,根据路由配置表,自动生成了当前层级的链接标签;
- createRoute函数,根据路由配置表,自动生成了当前层级的路线标签;
- createRoute函数,假如路由配置表某个对应组件,有路由属性,则自动将这个属性的值,传给了该组件,于是该组件可以拿到自己的,这一层级的子组件路由配置表;