递归生成嵌套路由(react-router 4.0以下)

最新推荐文章于 2024-03-15 15:06:11 发布

xinqilela

最新推荐文章于 2024-03-15 15:06:11 发布

阅读量2.2k

点赞数

CC 4.0 BY-SA版权

文章标签： react-router 4.0以下

本文链接：https://blog.youkuaiyun.com/xinqilela/article/details/79626444

本文介绍了一个用于解析和构建路由组件的函数descRouter。该函数接受一个包含路径和组件信息的routes数组作为参数，并递归地创建对应的React Route组件。示例展示了如何处理嵌套路由。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

function descRouter(routes) {
    return routes.map((route, i) => {
        if (route.routes) {
            return (
                <Route component={route.component} path={route.path}>
                    {descRouter(route.routes)}
                </Route>
            );
        } else {
            return (<Route component={route.component} path={route.path}/>);
        }
    });
}

参数routes的结构如下：

[

{    path:'/',

   component: 'InterfaceList',

   routes: [ 

             {   path: 'aaa',


                  component:  'UserList',

              },

              {  path: 'bbb',


                  component:  'ProfileList',

              }

         ]

},
{


   path:'/ABCList',

   component: 'ABCList',

}

]