关注互联网应用及运维技术的个人博客

withRouter解决react组件history、location、match丢失的问题

withRouter的作用:将react-router的 history、location、match 三个对象传入props对象上

默认情况下必须是经过路由匹配渲染的组件才存在this.props,才拥有路由参数,才能使用编程式导航的写法,执行this.props.history.push(’/detail’)跳转到对应路由的页面
然而不是所有组件都直接与路由相连(通过路由跳转到此组件)的,当这些组件需要路由参数时,使用withRouter就可以给此组件传入路由参数,此时就可以使用this.props

代码:

import React from "react";
import { withRouter } from "react-router-dom";
class Home extends React.Component {
    render() {
        return <div>zujian</div>
    }
}

export default withRouter(Home)

这样在this.props就存有history、location、match三个属性了。

赞(0)
未经允许不得转载:飞天狒狒 » withRouter解决react组件history、location、match丢失的问题

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址