react 路由模块化 嵌套路由

路由模块封装

import Home from '../commpents/Home';
import Shop from '../commpents/Shop';
import User from '../commpents/User';
import News from '../commpents/News';

import UserAdd from '../commpents/User/UserAdd';
import UserList from '../commpents/User/UserList';

let routes=[
  {
    path:"/",
    component:Home,
    exact:true
  },
  {
    path:"/shop",
    component:Shop
  },
  {
    path: "/user",
    component: User,
    routes:[
      {
        path:"/user/",
        component:UserList
      },{
        path:"/user/add",
        component:UserAdd
      }
    ]
  },
  {
    path: "/news",
    component: News
  }
]
export default routes;

首页面父子路由传递

  render() {
    return (

      <Router>
        <div>
            <header className="title">

                <Link to="/">首页组件</Link>
                <Link to="/user">用户页面</Link>
                <Link to="/shop">商户</Link>
                <Link to="/news">新闻</Link>
            </header> 


            {
              routes.map((route,key)=>{

                  if(route.exact){

                    return <Route key={key} exact path={route.path}                     

                    // route.component     value.component   <User  {...props}  routes={route.routes} />

                    render={props => (
                      // pass the sub-routes down to keep nesting
                      <route.component {...props} routes={route.routes} />
                    )}

                    />
                  }else{
                    return <Route  key={key}  path={route.path} 
                    render={props => (
                      // pass the sub-routes down to keep nesting
                      <route.component {...props} routes={route.routes} />
                    )}
                    />

                  }
              })
            }            
          
         
        </div>
      </Router>
    );
  }

user用户组件嵌套子路由页面

import React from 'react';
// import UserList from '../commpents/User/UserList';
// import UserAdd from '../commpents/User/UserAdd';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
class User extends React.Component {
    constructor(props) {
        super(props);
        this.state = {  };
    }
    render() {
        return (
            
            <div className='user'>
               <div className='content'>
                    <div className='left'>
                        <Link to='/user/'>用户列表</Link>
                        <br/><br/>
                        <Link to='/user/add'>增加用户</Link>
                    </div>

                    <div className='right'>
                        
                            {/* <Route  path="/user/add" component={UserAdd} />
                            <Route exact path="/user/" component={UserList} /> */}
                            {
                                this.props.routes.map((item,index)=>{
                                    return <Route key={index} exact path={item.path} component={item.component}/>
                                })
                            }
                          
                    </div>
               </div>
               

            </div>
            
        );
    }
}

export default User;