React withRouter的使用及源码实现

一 基本介绍

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

默认情况下必须是经过路由匹配渲染的组件才存在this.props，才拥有路由参数，才能使用编程式导航的写法，执行this.props.history.push(‘/detail’)跳转到对应路由的页面

然而不是所有组件都直接与路由相连（通过路由跳转到此组件）的，当这些组件需要路由参数时，使用withRouter就可以给此组件传入路由参数，此时就可以使用this.props

二 withRouter使用

import React from 'react';
import {withRouter} from '../react-router-dom';
class NavHeader extends React.Component{
    render(){
        return <div onClick={()=>this.props.history.push('/')}>{this.props.title}</div>
    }
}

export default withRouter(NavHeader);
1
2
3
4
5
6
7
8
9

三 withRouter源码实现

import React from 'react';
import RouterContext from './RouterContext';
function withRouter(OldComponent){
  return props=>(
    <RouterContext.Consumer>
        {
            (value)=>(
                <OldComponent {...value} {...props}/>
            )
        }
    </RouterContext.Consumer>
  )
}
export default withRouter;
1
2
3
4
5
6
7
8
9
10
11
12
13
14