React 路由模块化，分离，嵌套传值

模块化

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

import Home from './components/Home';
import User from './components/User';
import Shop from './components/Shop';

import News from './components/News';

import './assets/css/index.css';

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



class App extends Component {

  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} component={route.component}/>
                  }else{
                    return <Route  key={key}  path={route.path} component={route.component}/>

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

export default App;

分离

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


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

export default routes;

import React, { Component } from 'react';

import { BrowserRouter as Router, Route, Link } from "react-router-dom";



import './assets/css/index.css';

import routes from './model/router.js';

class App extends Component {

  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} component={route.component}/>
                  }else{
                    return <Route  key={key}  path={route.path} component={route.component}/>

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

export default App;

嵌套传值

import Home from '../components/Home';
import User from '../components/User';
    import UserList from '../components/User/UserList';
    import UserAdd from '../components/User/UserAdd';
    import UserEdit from '../components/User/UserEdit';
import Shop from '../components/Shop';
import News from '../components/News';


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: "/user/edit",
          component: UserEdit
        }
      ]
    },
    {
      path: "/news",
      component: News
    }
];

export default routes;

import React, { Component } from 'react';

import { BrowserRouter as Router, Route, Link } from "react-router-dom";

import './assets/css/index.css';

import routes from './model/router.js';

class App extends Component {

  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>
    );
  }
}

export default App;

import React, { Component } from 'react';

import { BrowserRouter as Router, Route, Link } from "react-router-dom";

class User extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            msg:'我是一个User组件'
         };
    }
    componentWillMount(){

        console.log(this.props.routes);
    }
    render() {
        return (
            <div className="user">               
               
               <div className="content">


                    <div className="left">

                        <Link to="/user/">用户列表</Link>

                        <br />
                        <br />

                        <Link to="/user/add">增加用户</Link>


                         <br />
                        <br />

                        <Link to="/user/edit">编辑用户</Link>


                    </div>

                    <div className="right">


                            {

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

                                     return   <Route key={key} exact path={route.path} component={route.component} />
                                })
                            }

                            {/* <Route  path="/user/add" component={UserAdd} /> */}

                    </div>


                    </div>


            </div>
        );
    }
}

export default User;