作用：
高阶组件中的withRouter, 作用是将一个组件包裹进Route里面, 然后react-router的三个对象history, location, match就会被放进这个组件的props属性中.
把不是通过路由切换过来的组件中，将react-router 的 history、location、match 三个对象传入props对象上
1. 默认情况下必须是经过路由匹配渲染的组件才存在this.props，才拥有路由参数，才能使用编程式导航的写法，执行this.props.history.push('/ ')跳转到对应路由的页面
然而不是所有组件都直接与路由相连（通过路由跳转到此组件）的，当这些组件需要路由参数时，使用withRouter就可以给此组件传入路由参数，此时就可以使用this.props
2. 高阶组件中的withRouter, 作用是将一个组件包裹进Route里面, 然后react-router的三个对象history, location, match就会被放进这个组件的props属性中.此时这个组件就具备了路由的属性
使用withRouter:
比如app.js这个组件，一般是首页，不是通过路由跳转过来的，而是直接从浏览器中输入地址打开的，如果不使用withRouter此组件的this.props为空，没法执行props中的history、location、match等方法
1 import { Switch, Route, Redirect, withRouter } from "react-router-dom";
2
3 import Home from "./components/Home.jsx";
4 import User from "./components/User.jsx";
5
6 class App extends React.Component {
7 constructor(props) {
8 super(props)
9 console.log(props) // 此时props里就具备了路由对象
props.history.listen((e) => { // 只要是具备路由功能的组件都可以使用这个方法，参数接收一个回调函数
console.log(e, '路由参数的变化')
})
10 }
11 render() {
12 return (
13 <div>
14 <Switch>
15 <Redirect from="/" to="/home" exact />
16 <Route exact path="/home" component={Home}></Route>
17 <Route exact path="/user" component={User}></Route>
18 </Switch>
19 </div>
20 );
21 }
22 }
23
24 export default withRouter(App); //参数是一个组件，返回一个组件
props.history.listen()
只要是具备路由功能的组件都可以使用这个方法，参数接收一个回调函数，但是是有切换页面时才会触发这个方法，很像vue中的组件内的钩子，当路由变化的时候做一些事情
props.history.listen((e) => { console.log(e, '开启了withRouter') })
