React自学笔记（十二）---react路由的嵌套

首先是根页面的编写：

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

import './assets/css/App.css';
import Home from './components/Home';
import News from './components/News';
import Product from './components/Product';
import Content from './components/Content';
import ProductContent from './components/ProductContent';
import User from './components/User';
import Shop from './components/Shop';
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {

    };
  }
  //render 模板   jsx
  render() {
    return (
      <Router>
        <div>

          <header className="title">
          <Link to="/">首页</Link>
          {/* <Link to="/news">新闻</Link> */}
          {/* <Link to="/product">商品</Link> */}
          <Link to="/user">用户界面</Link>
          <Link to="/shop">商户</Link>
          </header>
          <Route exact path="/">
            <Home />
          </Route>
          <Route path="/news">
            <News />
          </Route>
          <Route path="/product">
            <Product />
          </Route>
          <Route path="/user">
            <User />
          </Route>
          <Route path="/content/:aid" component={Content} />
          <Route path="/productcontent" component={ProductContent} />
          <Route path="/shop" component={Shop} />
         
            
          
        </div>
      </Router>
    )
  }
}

export default App;

在components下新建了两个文件夹，分别是Shop类和User类，是商户shop.js和用户界面User.js的子页面存放的地方。
Shop.js：

import React, { Component } from 'react';
import {
    BrowserRouter as Router,
    // Switch,
    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,
    // Switch,
    Route,
    Link
} from "react-router-dom";
// const axios = require('axios');
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;

而他们简单的子页面：
商户列表ShopList.js:

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

export default ShopList;

商户增加ShopAdd.js:

import React, { Component } from 'react';
class ShopAdd extends Component {
    constructor(props) {
        super(props);
        this.state = {  };
    }
    render() {
        return (
            <div className="shop">
                增加商户
            </div>
        );
    }
}

export default ShopAdd;

用户个人中心Main.js：

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

export default Main;

用户信息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;

在User.js中用到的content样式

/*左右分栏*/
.content{
  width: 100%;
  height: 500px;
  display: flex;
}

.content .left{
  width: 200px;
  height: 500px;
  background: #eeee;
}

.content .right{
  flex: 1;
  height: 500px;
  border: 1px solid #000;
}