咨询React Router跳转同路由不同参数时页面不自动刷新的解决方法

问题原因 #

这是react-router的默认优化逻辑：当跳转的路由和当前路由匹配同一个组件时，react-router会复用现有组件实例，不会触发组件的卸载和重新挂载，因此你只在组件挂载阶段执行的拉取聊天数据逻辑不会重新运行，自然不会加载新的聊天内容。

推荐解决方案（按优先级排序） #

1. 监听路由参数变化触发数据重新加载（最优） #

这是性能损耗最小的方案，不需要重新挂载组件，只需要在参数变化时重新执行数据拉取逻辑即可。
如果你使用的是react-router v6，示例代码如下：

import { useParams, useEffect, useState } from 'react-router-dom'
// 聊天页面组件内部
const ChatPage = () => {
  const { userid1, userid2 } = useParams()
  const [chatRecords, setChatRecords] = useState([])

  // 将获取聊天记录的逻辑放到useEffect中，依赖设置为两个用户id参数
  useEffect(() => {
    // 参数变化时自动执行，拉取对应聊天内容
    const fetchChatRecords = async () => {
      const res = await api.getChatHistory(userid1, userid2)
      setChatRecords(res.data)
    }
    fetchChatRecords()
  }, [userid1, userid2]) // 两个参数任意变化都会触发回调执行

  // 其余组件逻辑...
}

2. 给路由组件设置唯一key强制重新挂载 #

如果你不想修改原有数据拉取逻辑，可以通过给组件绑定和参数关联的key，实现参数变化时自动销毁旧组件、挂载新组件，和手动刷新的效果一致：

// 路由配置处的代码
import { useParams } from 'react-router-dom'

const RouterConfig = () => {
  return (
    <Routes>
      {/* 其余路由... */}
      <Route 
        path="/chat/:userid1/:userid2" 
        element={
          <RouteWrapper>
            <ChatPage key={`${useParams().userid1}-${useParams().userid2}`} />
          </RouteWrapper>
        } 
      />
    </Routes>
  )
}

也可以直接在ChatPage组件内部的根元素绑定key，效果一致。

3. 强制整页刷新（不推荐） #

如果确实需要完全刷新整个页面，可以直接在Link组件上添加reloadDocument属性，点击时会和普通a标签一样触发整页重载，会丢失页面全局状态、性能损耗较高，非必要不使用：

<Link 
  to={`/chat/${params.myuid}/${friends.uid}`}
  reloadDocument // 添加该属性即可触发整页刷新
>
  <div className="text-center pt-3">
    <img className="friends-img" src={friends.url} alt=""/>
  </div>
</Link>

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