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 (
      

        {/* HashRouter组件是路由视图，类似vue中的router-view */}
        
          {/* 导航条 */}
          

            
首页
            
用户
            
游戏
          

          

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

              {/* 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 detail  */}
              {/* 解决：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. */}
            
          
        
      
    );
  }

  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 (
      

        
用户
        
        

          {/* 竖向导航条 */}
          

            
学生
            
老师
          
          {/* 导航条对应的内容 */}
          

            {this.props.children}
          
        
        
      
    );
  }

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

export default User;