React项目onChange方法中this.props.history.push不生效如何解决？

问题原因 #

你的代码一共存在4处导致跳转失效或存在隐患的问题：

• 事件回调函数内部多嵌套了一层未执行的箭头函数：触发ageSelect/jobSelect时仅创建了新箭头函数，并未实际执行history.push逻辑
• filter_age跳转路径缺少开头的斜杠，会被识别为相对路径拼接在当前URL后
• App组件未被Route组件直接渲染，默认无法获取this.props.history对象
• 最后404路由绑定App组件会导致路由匹配失败时无限递归渲染App

修复方案 #

第一步：用withRouter高阶组件包裹App组件，注入路由属性 #

在App.js的导入部分添加withRouter引入：

import { Route, Link, Switch, withRouter } from 'react-router-dom';

修改导出语句为：

export default withRouter(App);

第二步：删除事件回调里多余的箭头函数，补全路径斜杠 #

修改ageSelect和jobSelect方法：

ageSelect(e) {
  this.props.history.push(`/filter_age/${e.target.value}`);
}

jobSelect(e) {
  this.props.history.push(`/filter_job/${e.target.value}`);
}

第三步：替换404路由的绑定组件，避免死循环 #

你可以单独写一个NotFound组件，或者暂时调整为提示内容，不要绑定App：

<Route path="*" render={() => <h2>页面不存在</h2>} />

内容的提问来源于stack exchange，提问作者Vasila_M