React - 常用封装方法之routerEach

原创已于 2024-01-11 11:28:36 修改 · 345 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

于 2019-10-02 20:39:36 首次发布

antd 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一个使用React和react-router-dom实现的动态路由配置方法。通过一个名为routerEach的函数，可以方便地根据传入的路由配置对象动态生成对应的React Router组件。此方法支持嵌套路由，并且能够递归渲染子路由。

import React from "react";
import {Route} from "react-router-dom";
export const routerEach = (routes) => {
    const fn = (children) => {
        return children.map((item,index) => (
            <Route path={item.path} key={index} render={()=>(
                <item.component />
            )} />
        ))
    }

    return routes.map((item,index) => {
        if(item.children){  //如果有子路由进入

            return fn(item.children);

        }else{      //否则没有子路由进入    

            return <Route path={item.path} key={index} render={() => (
                <item.component />
            )} />
            
        }
    })
}