React withRouter的使用及源码实现

一 基本介绍

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

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

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

二 withRouter使用

bash 复制代码
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);

三 withRouter源码实现

bash 复制代码
import React from 'react';
import RouterContext from './RouterContext';
function withRouter(OldComponent){
  return props=>(
    <RouterContext.Consumer>
        {
            (value)=>(
                <OldComponent {...value} {...props}/>
            )
        }
    </RouterContext.Consumer>
  )
}
export default withRouter;
相关推荐
PleaSure乐事4 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
getaxiosluo4 小时前
react jsx基本语法,脚手架,父子传参,refs等详解
前端·vue.js·react.js·前端框架·hook·jsx
新星_5 小时前
函数组件 hook--useContext
react.js
阿伟来咯~7 小时前
记录学习react的一些内容
javascript·学习·react.js
吕彬-前端7 小时前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js
学前端的小朱7 小时前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
bysking8 小时前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js
September_ning12 小时前
React.lazy() 懒加载
前端·react.js·前端框架
web行路人12 小时前
React中类组件和函数组件的理解和区别
前端·javascript·react.js·前端框架
番茄小酱00112 小时前
Expo|ReactNative 中实现扫描二维码功能
javascript·react native·react.js