React学习之旅----项目小实例----无人点餐二---嵌套路由

App.js

/*
  react路由的配置：
    1、找到官方文档 https://reacttraining.com/react-router/web/example/basic
    2、安装  cnpm install react-router-dom --save
    3、找到项目的根组件引入react-router-dom
       import { BrowserRouter as Router, Route, Link } from "react-router-dom";
    4、复制官网文档根组件里面的内容进行修改  （加载的组件要提前引入）
         <Router>
                <Link to="/">首页</Link>
                <Link to="/news">新闻</Link>
                <Link to="/product">商品</Link>
               <Route exact path="/" component={Home} />
               <Route path="/news" component={News} />    
               <Route path="/product" component={Product} />   
         </Router>
         exact表示严格匹配  
react动态路由传值
1、动态路由配置
<Route path="/content/:aid" component={Content} />   
2、对应的动态路由加载的组件里面获取传值
this.props.match.params
跳转：<Link to={`/content/${value.aid}`}>{value.title}</Link>
react get传值  
1、获取 this.props.location.search       
*/
import React, { Component } from 'react';
// import logo from './logo.svg';
// import './App.css';
import './assets/css/index2.css'
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import Home2 from './components/Home2'
// import News from './components/News'
// import Product from './components/Product'
// import Content from './components/Content'
// import ProductContent from './components/ProductContent'
// import Pcontent from './components/Pcontent'
// import Login from './components/Login';
import User from './components/User';
import Shop from './components/Shop';
class App extends Component {
  render () {
    return (
      <Router>
        <div>
          {/* link路由跳转 */}
          <Link to="/">首页</Link>
          {/* <Link to="/news">新闻</Link> */}
          {/* <Link to="/product">商品</Link> */}
          {/* <Link to="/pcontent">商品</Link> */}
          {/* <Link to="/productcontent">商品详情</Link> */}
          <Route exact path="/" component={Home2} />
          {/* <Route path="/login" component={Login} /> */}
          <Link to="/user">用户页面</Link>
               <Link to="/shop">商户</Link>
          {/* <Route path="/news" component={News} /> */}
          {/* <Route path="/product" component={Product} /> */}
          {/* <Route path="/pcontent/:id" component={Pcontent} /> */}
          <Route path="/user" component={User} />
           <Route path="/shop" component={Shop} />
          {/* <Route path="/productcontent" component={ProductContent} /> */}
          {/* 配置动态路由 */}
          {/* <Route path="/content/:aid" component={Content} /> */}
        </div>
      </Router >
    )
  }
}
export default App;

Home2.js

import React, { Component } from 'react';


const axios = require('axios');

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

export default Home2;

Shop.js

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

import ShopAdd from './Shop/ShopAdd';
import ShopList from './Shop/ShopList';

class Shop extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            msg:'我是一个商户组件'
         };
    }    
    render() {
        return (
            <div className="shop">
               <div className="content">
                <div className="left">
                    <Link to="/shop/">商户列表</Link>
                    <br />
                    <br />
                    <Link to="/shop/add">增加商户</Link>
                </div>
                <div className="right">                        
                        <Route exact path={`${this.props.match.url}/`} component={ShopList} />
                        <Route  path={`${this.props.match.url}/add`} component={ShopAdd} />
                </div>
                </div>
            </div>
        );
    }
}
export default Shop;

User.js

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import Info from './User/Info';
import Main from './User/Main';
class User extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            msg:'我是一个User组件'
         };
    }    
    render() {
        return (
            <div className="user">  
               <div className="content">
                   <div className="left">
                        <Link to="/user/">个人中心</Link>
                        <br />
                        <br />
                        <Link to="/user/info">用户信息</Link>
                    </div>
                    <div className="right">                            
                            <Route exact path="/user/" component={Main} />
                            <Route  path="/user/info" component={Info} />
                    </div>
               </div>
            </div>
        );
    }
}
export default User;

Info.js

import React, { Component } from 'react';
class Info extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            msg:'我是用户信息'
         };
    }    
    render() {
        return (
            <div className="info">
                我是用户信息组件
            </div>
        );
    }
}
export default Info;

Main.js

import React, { Component } from 'react';
class Info extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            msg:'我是个人中心'
         };
    }    
    render() {
        return (
            <div className="info">
                我是个人中心组件
            </div>
        );
    }
}
export default Info;

ShopAdd.js

import React, { Component } from 'react';
class ShopAdd extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            msg:'我是一个商户组件'
         };
    }    
    render() {
        return (
            <div className="shop">
                增加商户
            </div>
        );
    }
}
export default ShopAdd;

ShopList.js

import React, { Component } from 'react';
class ShopAdd extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            msg:'我是一个商户组件'
         };
    }    
    render() {
        return (
            <div className="shop">
                增加列表
            </div>
        );
    }
}
export default ShopAdd;