React中使用history.push时如何强制触发页面全量重载

React Router 封装的 useHistory 下的 history.push() 方法是客户端路由的原生设计，本身不支持触发页面全量重载，也没有内置参数可以直接开启该效果，你可以通过以下方案实现需求：

• 方案1：直接调用浏览器原生API跳转
  直接替换原有的 history.push('/home') 代码，改为浏览器原生跳转逻辑，会自动触发整页重载：

  window.location.href = '/home'
  

  该方案逻辑最简，效果和普通HTML页面的a标签跳转完全一致。

• 方案2：路由跳转完成后手动触发重载
  如果需要先执行React Router侧的路由钩子、状态更新等逻辑，再触发整页重载，可以用以下写法：

  import { useHistory } from 'react-router-dom'
  
  function YourComponent() {
    const history = useHistory()
    const handleBtnClick = () => {
      history.push('/home')
      // 放入宏任务队列等待路由逻辑执行完成后再重载
      setTimeout(() => window.location.reload(), 0)
    }
    return <button onClick={handleBtnClick}>跳转并重载</button>
  }
  

• 方案3（React Router v6适配）：如果你的项目后续升级到v6版本，可以直接使用官方提供的重载参数：

  import { useNavigate } from 'react-router-dom'
  
  function YourComponent() {
    const navigate = useNavigate()
    const handleBtnClick = () => {
      navigate('/home', { reloadDocument: true })
    }
    return <button onClick={handleBtnClick}>跳转并重载</button>
  }
  

注意：整页重载会清空当前React应用所有内存中的状态（包括全局状态管理数据、组件临时状态等），如果没有特殊要求优先使用客户端路由逻辑处理状态更新，避免影响用户体验。

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