react-router路由配置

亦凉 2022-05-24 04:47 349阅读 0赞

React路由传参，路由配置

const RouteConfig = [
        {
            path: 'first',
            component: First,
            name: '第一个路由',
            routes: [
                {
                    path: '1',
                    component: ChildOne,
                    name: '1-1'
                }
            ]
        },
        {
            path: 'second',
            component: Second,
            name: '第二个路由'
        }
    ]

解释：

1.  部件是组件;
2.  路径是该组件对应的URL;
3.  名非必须，这里是为了省事，自动生成链接标签的描述文字才加的;
4.  路由可选，是该组件的子组件的路由信息具体来说，就是将这个值传给路由的子组件，然后子组件就可以拿这个生成自己的子路由信息了。

单纯看这个比较麻烦，我们先来看一个函数吧：

const createRouter = (routes, props) => (
        <Router>
            <div>
                {
       /* 自动生成 Link 标签 */}
                {createLink(routes, props)}
                <hr/>
                {
       /* 自动生成 Route 标签 */}
                {createRoute(routes, props)}
            </div>
        </Router>
    )
    createRouter(RouteConfig, props)

这个函数干了三件事：

1.  创建了一个路由器标签;
2.  根据路由（来源于上面的路由配置表），自动生成了多个链接标签;
3.  以及多个路由标签;

预期上，这两个生成标签的函数，他们生成的链接标签和路径标签是一一对应的;

--------------------

然后我们再分别看这两个生成函数，先看第一个生成链接标签的：

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'
        }
    ]

因此，子组件可以继续调用上面两个函数，来自动生成链接标签，和路由标签。

--------------------

简单总结一下上面的过程：

1.  调用函数createRouter，传参路由配置表;
2.  createRouter函数会调用自动生成链接标签和自动生成路由标签的函数;
3.  建立连结函数，根据路由配置表，自动生成了当前层级的链接标签;
4.  createRoute函数，根据路由配置表，自动生成了当前层级的路线标签;
5.  createRoute函数，假如路由配置表某个对应组件，有路由属性，则自动将这个属性的值，传给了该组件，于是该组件可以拿到自己的，这一层级的子组件路由配置表;