react-router

1.引入
    import React from 'react';
    import { BrowserRouter as Router, Route, Link} from "react-router-dom";
2.基本用法
    app.js:

import React from "react";
import Header from "./header/index";
import Home from "../container/home/index";
import Detail from "../container/detail/index";
import List from "../container/list/index";
import NotFound from "../container/notFound/index";
import { Route, Redirect } from "react-router-dom";

class AppComponent extends React.Component {
  render() {
    return (
      <div>
        <Header />
        <switch>      {/* 唯一路由匹配 */}
          <Route exact path="/" component={Home} />   {/* 唯一匹配 */}
          <Route exact path="/list" component={List} />
          <Route exact path="/notFound" component={NotFound} />
          <Route exact path="/detail" component={Detail} />
          <Redirect to='/notFound' />             {/* 默认匹配 */}
        </switch>
      </div>
    );
  }
}

AppComponent.defaultProps = {};

export default AppComponent;

3.match对象（路由跳转后的组件可获取此参数）
    对象包含属性
    isExact:判断路由是否为全等匹配
    param:path包含的其他数据
    path:路由path值
    url:实际url的hash值
    
    const Index = ({match})=>{
        <div>
            <Link to={`${match.url}/page1`}>aaa</Link>
            <Link to={`${match.url}/page2`}>aaa</Link>
            
            <Route path={`${match.url}/:id` component={page}}
        </div>
    }
    Page.jsx
    const Branch = ({ match }) => {
    console.log(match);
    return (
            <div>
            <h3>{match.params.branchId}</h3>    //输出id
            </div>
        )
    }
4.history
    用来记录路由跳转记录
    4.0以前提供三种方法生成
    hashHistory 老版本浏览器的history
    browserHistory h5的history
    memoryHistory node环境下的history，存储在memory中
    4.0之后react-router-dom直接集成
    用BrowserRouter、HashRouter、MemoryRouter代替历史记录方法
5.路由跳转
    <Link to='***'/>
    to分为string和obj类型
    <Link to={{
        pathname:'/index',      //路径
    }} />