React：路由（二级路由)

路由： npm install react-router-dom --save

App.js

import React, { Component } from 'react';
// import logo from './logo.svg';
import './App.css';

// 导入路由模板
// Route：定义一条路由规则
// Switch/Router：在Switch/Router组件中定义多条路由规则，和Route配合使用
// HashRouter/BrowserRouter：hashHistory/browserHistory，两种路由跳转history模式
// Link：路由跳转的组件（类似vue路由中的router-link）
import {Route,HashRouter,Link,Switch} from "react-router-dom"

// 导入四个页面
import Home from "./views/Home/Home"
import User from "./views/User/User"
import Game from "./views/Game/Game"
import NotFound from "./views/NotFound/NotFound"
import Student from "./views/User/Student/Student"
import Teacher from "./views/User/Teacher/Teacher"

class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      active: 0
    }
  }
  render() {
    return (
      <div>
        {/* HashRouter组件是路由视图，类似vue中的router-view */}
        <HashRouter>
          {/* 导航条 */}
          <ul className="App-list">
            <li><Link to="/" className={this.state.active===0?"App-active":""} index={0} onClick={this.navClick}>首页</Link></li>
            <li><Link to="/user" replace className={this.state.active===1?"App-active":""} index={1} onClick={this.navClick}>用户</Link></li>
            <li><Link to="/game" className={this.state.active===2?"App-active":""} index={2} onClick={this.navClick}>游戏</Link></li>
          </ul>

          <main>
            {/* 定义路由规则：Switch中嵌套Route */}
            <Switch>
              {/* react中的路由匹配采用的是开头匹配法。1.可以考虑把路径path="/"放到规则的最后面 2.把匹配改为精准（严格）匹配，添加属性exact即可 */}
              <Route exact path="/" component={Home} />
              <Route path="/user" render={props=>
                <User>
                  <Route exact path="/user" component={Student} /> 
                  <Route path="/user/teacher" component={Teacher} /> 
                </User>
              } /> 
              <Route path="/game" component={Game} /> 
              {/* 如果不设置path属性，可以匹配到任何路径，用于设置404页面（放到所有规则的最后面） */}
              <Route component={NotFound}></Route>

              {/* ps：Warning: Hash history cannot PUSH the same path; a new entry will not be added to the history stack 原因：这个是 reactr-router 的一个提示，当前路由下的 history 不能 push 相同的路径到 stack 里。只有开发环境存在，生产环境不存在，目前还没看到官方有去掉的意思。看不惯的话可以采取一些方法关掉这个提示。*/}
              {/* 解决：添加上replace <Link to={{ pathname: "/app/studyMapModule/detail" }} replace>detail</Link>  */}
              {/* 解决：But you should only get this warning in development. If you generate your production build correctly (using NODE_ENV=production) you shouldn't see this warning in production. */}
            </Switch>
          </main>
        </HashRouter>
      </div>
    );
  }

  navClick = (e)=>{
    this.setState({
      active: e.target.getAttribute("index")*1
    });
  }
}

export default App;

User.js

import React, { Component } from 'react';
import './User.css';
import {Link} from "react-router-dom"

class User extends Component {
  render() {
    return (
      <div className="root User">
        <h1>用户</h1>
        <input type="text"/>
        <div className="User-Content">
          {/* 竖向导航条 */}
          <ul className="User-List">
            <li><Link to="/user">学生</Link></li>
            <li><Link to="/user/teacher">老师</Link></li>
          </ul>
          {/* 导航条对应的内容 */}
          <div className="User-Children">
            {this.props.children}
          </div>
        </div>
        
      </div>
    );
  }

  componentDidMount(){
    console.log("user渲染完成了");
  }
}

export default User;