WithRouter

1. 作用：

在不是通过路由传递过来的组件中，将react-router的** history\location\match** 三个对象传入到props对象上。
默认情况下，必须是通过路由匹配渲染的组件才存在this.props，才拥有路由参数，才能使用编程式导航的写法，执行this.props.history.push('/pages')跳转至对应页面。
但是并不是所有的组件都是通过路由跳转的（比如，首页组件，是由浏览器直接渲染的），当这些组件需要路由参数时，使用withRouter就可以给此组件传入路由参数，使用this.props；

2. 在组件中引入withRouter

使用withRouter将history\location\match等方法注入到props中。

import { withRouter } from 'next/router';
import Link from 'next/link';

// 此时才能获取router中的各个对象；
const Poster = ({router}) => {
  return (
    <>
      <div>This is {router.query.name}</div>
      <Link href="/"><a>back home</a></Link>
    </>
  )
}

export default withRouter(Poster);

3. 对路由的切换进行监听

可以根据路由切换浏览器的title属性，对props.history进行监听，切换路由的时候获取当前的路由路径，同时可以根据不同的路由设置不同的浏览器的title标题。

props.history.listen((location)=>{  //在这里监听location对象
                        console.log(location.pathname);  //切换路由的时候输出"/one/users"和"/one/companies"
                        switch(location.pathname){   //根据路径不同切换不同的浏览器title
                                case '/one/users' : document.title = '用户列表'; break;
                                case '/one/companies' : document.title = '公司列表'; break;
                                default : break;
                        }
                })