十七、React路由嵌套：头部导航+侧边导航

一、概述

实现功能：点首页，展示首页，同时在左侧有个首页的各个栏目导航；点用户，同首页；

二、代码实现

1. src/App.js

import React from 'react';
import './App.css';
import { BrowserRouter as Router, Route,Link } from 'react-router-dom'; //引入路由模块
import Home from './components/home';
import User from './components/user';

function App() {
  return (
    <Router>
      <div>
        <header className='header'>
          <Link to='/'>首页</Link>
          <Link to='user'>个人中心</Link>
        </header>
        <Route exact path="/" component={Home} />
        <Route path="/user" component={User} />
      </div>
    </Router>
  );
}
export default App;

src/App.css

.header{
  background-color:#000;
  height: 50px;
  padding-top: 5px;
  padding-left: 5px;
}
.header a{
  color: #fff;
  margin-right: 10px;
  /*a链接在 div内垂直居中写法*/
  height: 50px;
  line-height: 50px;

}

2.【重点】src/components/user.js

import React, { Component } from 'react';
import './css/user.css';
import {BrowserRouter as Router,Route,Link} from 'react-router-dom';
import Main from './user/main.js';
import Info from './user/info';

class User extends Component {
    constructor(props){
        super(props);
        this.state={}
    }

    render() {
      return (
        <Router>
        <div className='user'>
          <div className='left'>
            <Link to='/user/'>个人中心</Link><br/>
            <Link to='/user/info'>个人信息</Link>
          </div>

          <div className='right'>
            {/* 父目录的动态写法：this.props.match.url 在此处=/user/ */}
            <Route exact path={`${this.props.match.url}/`} component={Main} />
            <Route path='/user/info' component={Info} />
          </div>
        </div>
      </Router>
      );
    }
  }
  export default User;

src/components/css/user.css

.user{
    width:100%;
    height: 800px;
    display:flex;
}
.user .left{
    width:200px;
    height: 800px;
    background-color: antiquewhite;
    border: 1px solid rgb(189, 71, 71);
    padding-left: 20px;
    padding-top: 50px;

}
.user .right{
    -webkit-flex: 1;
    flex:1;
    height: 800px;
    background-color: #eee;
    border: 1px solid rgb(170, 43, 43);
}

3.src/components/user/main.js、info.js

3.1 main.js

import React, { Component } from 'react';

class Main extends Component {
    constructor(props){
        super(props);
        this.state={}
    }

    render() {
      return (
        <div>
          这里是个人中心主页
        </div>
      );
    }
  }
  export default Main;

3.2 info.js

import React, { Component } from 'react';

class Info extends Component {
    constructor(props){
        super(props);
        this.state={}
    }

    render() {
      return (
        <div>
          这里是个人信息中心
        </div>
      );
    }
  }
  export default Info;

4.src/components/home.js

import React, { Component } from 'react';

class Home extends Component {
    constructor(props){
        super(props);
        this.state={ }
    }

    render() {
      return (
        <div>
这里是首页
        </div>
      );
    }
  }
  export default Home;

5.效果

从首页点到个人中心后，再点左侧导航，可跳转到对应信息处