antd Card组件extra属性内react-router-dom Link跳转后页面不更新问题

问题根因 #

该问题90%以上的场景是因为使用了 react-router-dom v6 版本，但仍然沿用 v5 的路由语法导致路由匹配失效，小概率为多Router嵌套导致上下文隔离。

解决方案 #

方案1：适配react-router-dom v6语法（推荐） #

v6 版本做了大量语法调整，和 v5 不兼容，需要将路由部分代码修改为如下写法：

// ContentComponent.jsx
import { Routes, Route } from 'react-router-dom'

export const ContentComponent = () => {
  return (
    <Content style={{ maxWidth: "99%" }}>
      {/* 废弃Switch替换为Routes */}
      <Routes>
        {/* 路由内容通过element属性传入，不需要exact属性 */}
        <Route path="/home" element={<Home />} />
        <Route path="/products/:id" element={<p>apsokfopaskdfop</p>} />
        <Route path="/products" element={<ProductList />} />
      </Routes>
    </Content>
  )
}

修改后即可正常响应Link跳转触发的路由变化。

方案2：如果确认使用的是react-router-dom v5 #

1. 检查全局有没有重复嵌套<Router>组件：你已经在App.jsx外层包裹了Router，其他子组件如果额外写了Router包裹的代码全部删掉，多个Router会导致上下文隔离，Link的跳转无法被Switch感知。
2. 如果ContentComponent被React.memo优化导致无法响应路由变化，新增useLocation钩子监听路由触发重渲染：

// ContentComponent.jsx
import { useLocation } from 'react-router-dom'

export const ContentComponent = () => {
  // 注入路由location依赖，路由变化时会触发组件重渲染
  const location = useLocation()
  return (
    <Content style={{ maxWidth: "99%" }}>
      <Switch>
        <Route path="/home">
          <Home />
        </Route>
        <Route path="/products/:id">
          <p>apsokfopaskdfop</p>
        </Route>
        <Route exact path="/products">
          <ProductList />
        </Route>
      </Switch>
    </Content>
  )
}

内容的提问来源于stack exchange，提问作者Otávio