React Router v5中history.push与<Link>联用跳转失效问题求解

问题根因定位 #

• 路径写法错误：你当前导航栏使用的this.props.history.push("A")传入的是相对路径，当你处于/B路径下执行该代码时，实际会跳转至/B/A而非预期的/A，若你的路由配置没有匹配/B/A的规则，组件A不会正常挂载，绑定在A组件上的Link点击事件自然不会生效。
• 路由上下文丢失：如果导航栏是全局公共组件，没有被路由直接渲染也没有包裹withRouter高阶组件，你获取的history实例不属于全局路由上下文，跳转操作只会修改地址栏，不会触发路由匹配逻辑与组件重渲染，组件A未正常更新导致Link事件失效。
• 路由匹配规则错误：/A对应的路由未添加exact精确匹配属性，被上层路由模糊匹配拦截，组件未正常触发挂载更新。

修复步骤 #

1. 修正导航栏跳转路径为绝对路径：

// 错误写法
this.props.history.push("A")
// 正确写法
this.props.history.push("/A")

2. 给非路由直接渲染的导航栏组件包裹withRouter高阶组件，确保获取正确的路由上下文：

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

class Navbar extends React.Component {
  // 组件原有逻辑
}

// 导出时用withRouter包裹
export default withRouter(Navbar)

3. 调整路由配置，添加exact属性保证精确匹配：

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

<Switch>
  <Route exact path="/A" component={ComponentA} />
  <Route exact path="/B" component={ComponentB} />
  {/* 其他路由规则 */}
</Switch>

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