React使用react-router-dom时根路由/下history.push失效问题咨询

问题排查及解决方案 #

1. 检查history实例是否正确注入 #

只有被Route组件直接渲染的组件，才会默认在props中注入history、location、match三个路由属性。如果当前调用push的组件不是路由直接渲染的（比如是路由组件的子组件、公共业务组件等），需要主动绑定路由属性：

• 类组件可以用withRouter高阶组件包裹导出：

import { withRouter } from 'react-router-dom';

class YourComponent extends React.Component {
  // 原有组件逻辑
}
export default withRouter(YourComponent);

• 函数组件可以直接用对应版本的路由hook获取操作实例。

2. 修正路由传参写法 #

你当前把自定义参数data、backg、texts和pathname平级放置的写法不符合react-router-dom的传参规范，自定义参数需要放到state属性下，否则会干扰路由跳转逻辑：

this.props.history.push({
  pathname:"/searchpost",
  state: {
    data:data,
    backg: c,
    texts:  " tags"+t,
  }
});

跳转后在目标组件可以通过this.props.location.state获取到你传递的所有自定义参数。

3. 确认路由版本适配 #

如果你使用的是react-router-dom v6版本，history.push API已经被废弃，需要改用useNavigate返回的方法实现跳转：

import { useNavigate } from 'react-router-dom';

function YourComponent() {
  const navigate = useNavigate();
  // 触发跳转的逻辑
  navigate('/searchpost', {
    state: {
      data: data,
      backg: c,
      texts: " tags"+t,
    }
  })
}

同时要确认/searchpost路由已经在路由表中正确注册，没有拼写错误，也没有被上层的重定向规则拦截。

4. 排查根路由组件逻辑 #

检查根路由/对应的组件代码，确认不存在条件渲染导致组件提前卸载、或者生命周期/副作用函数中存在拦截跳转、重置history实例的逻辑，这类情况也会导致push操作被覆盖失效。

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