[react]react动态生成路由

import loadable from '@loadable/component'

constructor(){
       super();
       this.state={
           routerList:[]
       }
   }
   bindRouter(list){
     let routerList= list.map((item)=>{
           if(item.menuChilds.length===0){
               return  <Route key={item.menuId} path={item.menuUrl} component={ loadable(() => import(`./${item.componentPath}`))}/>
           }else{
              return  <Route key={item.menuId} path={item.menuUrl} render={() =>{
                  let ComponentName =loadable(() => import(`./${item.componentPath}`));
                  return <ComponentName {...this.props}>
                       {this.bindRouter(item.menuChilds)}
                   </ComponentName>
                      }}>
              </Route>
           }
       })
     return routerList;
   }
   componentDidMount(){
       let menuList =this.bindRouter(this.props.user.user.menuInfo);
       this.setState({
           routerList :menuList
       })
   }

let routerList= list.map((item)=>{
            if(item.menuChilds.length===0){
                return  <Route key={item.menuId} path={item.menuUrl} component={ loadable(() => import(`./${item.componentPath}`))}/>
            }else{
                 return [...this.bindRouter(item.menuChilds),<Route key={item.menuId} path={item.menuUrl} component={ loadable(() => import(`./${item.componentPath}`))}/>]
            }
        })