withRouter的作用场景

作用：把不是通过路由切换过来的组件中，将react-router 的 history、location、match 三个对象传入props对象上，

例如react app.js这个组件一般是首页，不是通过路由跳转过来的，而是直接从浏览器中输入地址打开的，如果不使用withRouter此组件的this.props为空，没法执行props中的history、location、match等方法。

设置withRouter很简单只需要两步：（1）import {withRouter} from "react-router-dom";（2）将App组件 withRouter(app) 一下

设置完打印就可以看见history，location，match等属性了

介绍一个简单应用

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

import React,{Component} from 'react'import {Switch,Route,NavLink,Redirect,withRouter} from 'react-router-dom'import One from './One'import NotFound from './NotFound'class App extends Component{

        constructor(props){

                super(props);

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

                                case'/one/companies' : document.title = '公司列表';break;

                                default:break;

                        }

                })

        }

        render(){

                return(

                        用户列表                        公司列表                                                                                                                                                               

)        }

}

export defaultwithRouter(App);

当然还有众多用途，如果你使用了编程式导航的写法：

this.props.history.push('/detail') 去跳转页面，但是报 this.props.history 错误 undefined，请在此组件中使用 withRouter 将 history 传入到 props上。