react-router模态路由使用history.push跳转失效如何解决

存在的问题 #

• <a>标签默认跳转行为未阻止：你给a标签设置了href="#"，点击时除了执行history.push逻辑外，还会触发a标签默认的锚点跳转行为，会覆盖你编程式导航设置的路由状态，导致路由状态异常。
• 标签语法错误：代码里<a>标签的结束标签错误写成了</div>，DOM结构嵌套异常，可能导致事件绑定失效。
• 路径不匹配：你history.push跳转的路径是/img/${id}，但路由配置里模态框对应的匹配路径是/contact/:name，两者完全不匹配，自然无法触发模态框渲染。
• history实例一致性问题：如果调用的history不是从react-router的useHistory/useNavigate（v6版本）钩子或者withRouter高阶组件注入的实例，而是自己单独创建的history对象，会和Router组件使用的不是同一个实例，无法触发路由状态更新。

修复方案 #

1. 修正点击事件与标签语法，阻止默认行为 #

首先调整a标签的事件逻辑与标签结构，同时修正跳转路径和路由配置匹配：

<a href="#" onClick={
  (e) => {
    // 阻止a标签默认跳转行为
    e.preventDefault()
    history.push({
      // 路径修改为和模态路由匹配的格式
      pathname: `/contact/${id}`,
      state: { background: location }
    })
  }
}>
    <Thumbnail color={color} />
    <p>{title}</p>
</a>

2. 确保使用react-router提供的路由实例 #

如果是react-router v5版本，在组件内通过useHistory钩子获取history实例：

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

function YourComponent() {
  const history = useHistory()
  // 后续直接调用这个history.push即可
}

如果是react-router v6版本，history接口被替换为navigate，对应写法调整为：

import { useNavigate, useLocation } from 'react-router-dom'

function YourComponent() {
  const navigate = useNavigate()
  const location = useLocation()
  
  const handleOpenModal = (id) => {
    navigate(`/contact/${id}`, {
      state: { background: location }
    })
  }
  // 点击事件绑定handleOpenModal即可
}

3. v6版本路由配置适配 #

如果你使用的是react-router v6，原Switch组件已升级为Routes，路由配置调整如下：

<div>
  <Routes location={background || location}>
    <Route path="/" element={<Home />} />
    <Route path="/contacts" element={<Contacts />} />
  </Routes>

  {background && <Route path="/contact/:name" element={<Modal />} />}
</div>

内容的提问来源于stack exchange，提问作者Ram Kumar Parthiban