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 (
      
        

          
          

            首页组件
            用户页面
            商户
            新闻
          
          {/* 
          
          
           */}
          {/* (
            
          )}/> */}
          {
            routes.map((value, key) => {
              if (value.exact) {
                // 向子组件传值
                return  (
                    
                  )} />
              } else {
                // 向子组件传值
                return  (
                    
                  )} />
              }
            })
          }
        
      
    );
  }
}
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 (
            
                

                    

                        

                            用户列表
                            

                            

                            增加用户
                            

                            

                            编辑用户
                        
                        

                            {/* 
                         */}
                            {
                                this.props.routes.map((value, key) => {
                                    return 
                                })
                            }
                            {/*  */}
                        
                    
                
            
        );
    }
}
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 (
            
               
                用户组件UserEdit
            
        );
    }
}

export default UserEdit;