this.props.history填坑

项目场景:

this.props.history填坑

问题描述:

今天在写路由跳转的时候发现当我点击跳转按钮时地址栏可以跳转到/我想要的路由下,但是组件加载不出来但是刷新后就可以了!可以正常加载 | |;

原因分析:

1、首先我们要知道对于子组件他是获取不到this.props.history这个方法的
2、第一点解决后还有个坑,对于子组件是不能通过this.props.history跳转到父组件的
下面我们通过实例来演示并解决

解决方案:

1、怎么让子组件可以使用this.props.history这个方法!!!
this.props.history填坑
这是我的子组件放到父组件之中
this.props.history填坑
这是我子组件导出的形式(那个错误不用管),当我点击按钮进行跳转时他会报一个错误
this.props.history填坑
这里说我们并没有这个方法,这里我们要用到withRouter,高阶组件中的withRouter, 作用是将一个组件包裹进Route里面, 然后react-router的三个对象history, location, match就会被放进这个组件的props属性中.我们加上瞧瞧。
this.props.history填坑
this.props.history填坑
这样就ok了

2、怎么解决子组件不能跳转到父组件呢,我们先来看看例子的效果,我是一个搜索框,输入想要搜索的内容后点击搜索,导航栏能正常变化,但是页面没有跳转
this.props.history填坑
this.props.history填坑

this.props.history填坑
一二张图是我的地址栏,最后一张是我的页面,
那我们好好想想,既然我们不能在子组件中实现跳转,那我们可不可以让父组件自己去跳转,我们只要把搜索页面影藏掉就行,也就是说当我们在父组件中定义好跳转函数,传给子组件,当我们点击搜索后子组件监听到页面要开始跳跳转了,他就会通过this,props.父组件方法去调用父组件的方法实现跳转,这样问题就解决了。