1. 主页
  2. 发布
  3. 短网址二维码
  4. Base64编码解码
  5. 移动版blog
react-router v4 孙节点无法使用 history 的解决方案
作者:晨曦沐枫|发表时间:2017-11-2 20:54:03 |分类:Reactjs

    用react-router 4.x写过单页应用的同学会发现 ,在router中传递的history在孙节点中(Home,List,Search,Detail 等组件中是取不到history对象的,

        这样导致我们无法使用 history 中的如下一些方法

            this.props.history.replace

            this.props.history.push

            this.props.history.go

            等~~~


    按照常用的单应用组件层级结构如下:


    

    既然 history 在 Router 组件中已经传递了,那么这个对象一定是存在的,而且存在于 Router 的 context 中,Router 源码如下:



    所以,其实所有子组件里面都可以通过 Context 中拿到这个 history 对象,方式如下:


import React from "react";
import PropTypes from "prop-types";

class Header extends React.Component {
  static contextTypes = {
    router: PropTypes.object
  }
  constructor(props, context) {
     super(props, context);
  }
  goHome() {
    this.context.router.history.push("/home");
  }
  ...
}

    但目前React 并不推荐我们这么使用,所以针对这个问题,可以使用react-router官方提供的 withRouter 组件来完成,鉴于H5项目里面只需要用得到 react-router-dom 组件,所以可以直接从这个组件引入 withRouter ,说明一下 react-router-dom 中90%的方法就是 react-router 来提供的,只是很大一部分被 react-router-dom 做了组件化包装。

    

    那我们如何使用 withRouter 来解决 history 取不到的问题,来姿势如下:



    withRouter可以包装任何自定义组件,将react-router 的 history,location,match 三个对象传入。 

    无需一级级传递react-router 的属性,当需要用的router 属性的时候,将组件包一层withRouter,就可以拿到需要的路由信息。

    如果需要看完整实例,请访问我的github项目 webpack3 + react-router4.x + redux 的完整项目:https://github.com/xmyxm/webpack-react-redux-spa


标签: react-router react-routerv4 react-router 4.x history跳转 最后修改时间:2018-1-20 13:44:29
晨曦沐枫

魔都漂泊码农一枚,平常热衷于分享探讨一些新技术,喜欢挑战又不忘初心,所以写了这么一个站点和大家分享交流,主要分享还是前端技术为主,也有记录工作经验和生活感悟。

由于个人水平有限,所以博客中的文章难免有错误或者不正确的地方,欢迎在文章下方留言,楼主看到会及时改正。

博客是我利用空闲时间维护的一个小项目,如有异常或者报错(一般异常都hold住了,手动微笑),欢迎留言或者邮件,楼主尽早修正,楼主已推出移动版blog,欢迎使用。

联系邮箱:myco_xmy@qq.com