一、关于react-router

react-router是一些封装好的组件用于前端路由，当我们点击的时候会出现一个虚拟的路由，并不会做页面的全刷新，实现不同组件之间的切换和跳转。（当然react-router里面把history.js这个库做了封装，history.js是基于window.history做的封装，所以react-router可以调用一些会话历史， history 知道如何去监听浏览器地址栏的变化， 并解析这个 URL 转化为 location 对象， 然后 router 使用它匹配到路由，最后正确地渲染对应的组件。）

二、有关学习网址

https://reacttraining.com/react-router/ 官网 https://www.npmjs.com/package/react-router npm https://github.com/ReactTraining/react-router github

三、react-router有3种使用场景

React Router被拆分成三个包：react-router,react-router-dom和react-router-native。react-router提供核心的路由组件与函数。其余两个则提供运行环境（即浏览器与react-native）所需的特定组件。

image.png

四、react-router-dom常用API介绍

<BrowserRouter>，<HashRouter> BrowserRouter和HashRouter用于最外层用法差不多，接受一个只接受一个子组件，通常我们会用于包裹最外面APP组件，区别是生成的路由HashRouter尾部会有一个“#”

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom'
ReactDOM.render((
  <BrowserRouter>
    <App />
  </BrowserRouter>
), document.getElementById('root'))

<Link>，<NavLink> Link和NavLink生成的是a标签，也是用于路由的跳转，2个组件都有1个to的属性（属性值即切换路由路径，当然属性值也可以为对象的形式传递），唯一不同的是NavLink生成a标签以后会增加一个class叫active。

import { Link } from 'react-router-dom'

<Link
  to={{
    pathname: "/courses",
    search: "?sort=name",
    hash: "#the-hash",
    state: { fromDashboard: true }
  }}
/>

<Route> 该组件最外层需要用BrowserRouter或者HashRouter进行包裹，一般我们将BrowerRouter和HashRouter包裹在最外层APP组件上，但是route内部嵌套就不需要BrowserRouter和HashRouter包裹了。 Route有path，component和exact属性，path为跳转路由路径，component为跳转的组件。Route不是全匹配，所以当我们进行路由判断的时候，比如一个路径为"/"，一个为“/news”这样我们进行跳转“/news”时任然会匹配到“/”，所以这时我们需要使用exact加在有"/"路径的Route上，加上以后路由绝对相等才会去匹配

<BrowserRouter>
  <div>
    <Route exact path="/" component={Home}/>
    <Route path="/news" component={NewsFeed}/>
  </div>
</BrowserRouter>

<Redirect> 用于重定向，就是上面所有Route路径都未找到，即匹配Redirect的to属性所指的路径路径 <Switch> 只渲染匹配到的第一个Route

 <Switch>
          <Route path="/home" component={Home} />
          <Route path="/about" component={About} />
          <Route path="/list" component={List} />
          <Route path="/detail" exact component={Error} />
          //Route组件中传参用：
          <Route path="/detail/:id" component={Detail} />
          <Redirect to="/home" />
</Switch>

高阶组件: withRouter 在我们使用Route组件时，会自动携带一些props传递至下一级组件。当我们没有使用Route组件时，我们想要使用这些props，这时我们需要使用高阶组件withRouter，之后我们就可以使用 match, location, history 这些API了。

import React from "react";
import { withRouter } from "react-router";

class ShowTheLocation extends React.Component {
  render() {
    const { match, location, history } = this.props;
    return <div>You are now at {location.pathname}</div>;
  }
}
export default withRouter(ShowTheLocation);