React学习之旅----项目小实例----无人点餐二---路由模块化-大型项目

App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import './assets/css/index.css';
import routes from './model/routes'
class App extends Component {
  render () {
    return (
      <Router>
        <div className="App">
          <img src={logo} className="App-logo" alt="logo" width='100px' />
          <header className="title">
            <Link to="/">首页组件</Link>
            <Link to="/user">用户页面</Link>
            <Link to="/shop">商户</Link>
            <Link to="/news">新闻</Link>
          </header>
          {/* <Route exact path='/' component={Home}/>
          <Route  path='/user' component={User}/>
          <Route  path='/shop' component={Shop}/>
          <Route  path='/news' component={News}/> */}
          {/* <Route exact path='/user/' render={props=>(
            <route.component {...props} routes={route.routes} />
          )}/> */}
          {
            routes.map((value, key) => {
              if (value.exact) {
                // 向子组件传值
                return <Route key={key} exact path={value.path}
                  render={props => (
                    <value.component {...props} routes={value.routes} />
                  )} />
              } else {
                // 向子组件传值
                return <Route key={key} path={value.path}
                  render={props => (
                    <value.component {...props} routes={value.routes} />
                  )} />
              }
            })
          }
        </div>
      </Router>
    );
  }
}
export default App;

User.js

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
// import UserList from './User/UserList.js'
// import UserAdd from './User/UserAdd.js'
class User extends Component {
    constructor(props) {
        super(props);
        this.state = {
            msg: '我是一个User组件'
        };
    }
    componentWillMount () {
        console.log(this.props.routes)
    }
    render () {
        return (
            <Router>
                <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">
                            {/* <Route exact path='/user' component={UserList} />
                        <Route exact path='/user/add' component={UserAdd} /> */}
                            {
                                this.props.routes.map((value, key) => {
                                    return <Route key={key} exact path={value.path} component={value.component} />
                                })
                            }
                            {/* <Route  path="/user/add" component={UserAdd} /> */}
                        </div>
                    </div>
                </div>
            </Router>
        );
    }
}
export default User;

routes.js

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: '/user',
    component: User,
    routes: [   /*嵌套路由*/
      {
        path: "/user/",
        component: UserList
      },
      {
        path: "/user/add",
        component: UserAdd
      },
      {
        path: "/user/edit",
        component: UserEdit
      }
    ]
  },
  { path: '/shop', component: Shop },
  { path: '/news', component: News }
]
export default routes

在配置路由时，只需建立如UserEdit.js组件，在routes.js配置路由，在User.js中配置Link，即可；

附加：UserEdit.js

import React, { Component } from 'react';

class UserEdit extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            msg:'我是一个UserEdit组件'
         };
    }
    render() {
        return (
            <div className="user">               
                用户组件UserEdit
            </div>
        );
    }
}

export default UserEdit;