react路由的withRouter

withRouter结合路由懒加载使用
路由代码

import React from 'react'
import {HashRouter,Route,Link,Switch} from 'react-router-dom'
import B from './bLoad'
class A extends React.Component//A组件根路由
{
    constructor(){
        super()

    }
    to=()=>{
        console.log(this.props)
      
    }

    render(){
        return<div>
     <span>主页</span>
     <button onClick={this.to.bind(this)}>获取路由信息</button>
        </div>
    }
}


class selectRouter extends React.Component
{
    constructor(){
        super()
    }
    componentDidMount(){
        console.log(this.props)
    }
    render(){
        return <div>
            <HashRouter>
            <div>
                <Link to="/">a</Link>
                <Link to="/b">b</Link>
            </div>
            <Switch>
                <Route exact path="/" component={A}></Route>
                <Route path="/b" component={B}></Route>
            </Switch>
            </HashRouter>
        </div>
    }
}
export default selectRouter;

路由懒加载包的引用使用

import React from 'react'
import load from 'react-loadable'

class LoadCo extends React.Component
{
    constructor(){
        super()
    }
    render(){ 
            return <div>loading</div>
    }
}
const Loa=load(
    {
    loader:() => import("./b"),
    loading:LoadCo  
    }
)
class loadCom extends React.Component
{
    constructor(){
        super()
    }
    render(){
        return <Loa/>
    }
}
export default loadCom;

B组件
import React from 'react'
import {withRouter} from 'react-router-dom'
class B extends React.Component
{
    constructor(){
        super()
        this.to=this.to.bind(this)

    }
    to(){
     console.log(this.props)
        this.props.history.push({
            pathname:"/",
            query:{
                name:"liu"
            }
        })
    }
    // to=()=>{
    //     console.log(this.props)
    //     this.props.history({
    //         path:"/",
    //         query:{
    //             name:"liu"
    //         }
    //     })
    // }
    render(){
        return<div>
            <button onClick={this.to}>跳转主页面</button>
        </div>
    }
}
export default withRouter(B);

总结两点
第一
路由懒加载的时候
如果不使用withRouter注入路由属性和方法
在懒加载的组件里面通过方法操作路由 就会报错

第二
注意函数方法的使用
a=()=>{} onClick={(e)=>{this.a(e)}}
a(){} onClick={this.bind.a(this)}//一个形参 默认接收参数 两个形参输出event
获取event使用以上方法