如何不刷新页面重新加载当前路由及组件？避免Redux Store被清空

当然可以实现！不用window.location.reload()这种会重载整个页面、清空Redux store的方式，下面给你几个实用的方案：

方案1：利用React Router的useNavigate更新路由Key #

这是最常用的方式，通过修改路由的key值，让React Router认为是一个新的路由实例，从而触发整个组件树的重新挂载：

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

// 封装一个自定义Hook，方便在组件中调用
function useRefreshRoute() {
  const navigate = useNavigate();
  const location = useLocation();

  const refresh = () => {
    // 保留原路径和查询参数，仅更新state里的key（用时间戳保证唯一性）
    navigate(`${location.pathname}${location.search}`, {
      replace: true, // 替换当前历史记录，避免产生多余的历史条目
      state: { ...location.state, key: Date.now() }
    });
  };

  return refresh;
}

// 在组件中使用
function MyComponent() {
  const refreshRoute = useRefreshRoute();

  return (
    <button onClick={refreshRoute}>重新加载当前页面</button>
  );
}

这个方法不会刷新整个页面，Redux store的状态也会完整保留，同时组件的生命周期钩子（比如useEffect的清理和重新执行）都会正常触发，和页面刷新的组件加载效果一致。

方案2：给路由容器添加动态Key #

如果你希望整个路由体系在key变化时自动重新渲染，可以在Routes组件上绑定动态key：

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

function App() {
  const location = useLocation();
  const navigate = useNavigate();

  // 触发刷新的函数
  const refreshApp = () => {
    navigate(location.pathname, {
      replace: true,
      state: { ...location.state, key: Date.now() }
    });
  };

  return (
    <>
      <button onClick={refreshApp}>刷新当前路由</button>
      {/* 给Routes绑定key，当location.key变化时，整个路由下的组件都会重新挂载 */}
      <Routes location={location} key={location.state?.key || location.key}>
        <Route path="/" element={<Home />} />
        <Route path="/dashboard" element={<Dashboard />} />
        {/* 其他路由配置 */}
      </Routes>
    </>
  );
}

这种方式的好处是，只要路由的key更新，所有路由下的组件都会重新初始化，适合需要全局刷新组件树的场景。

注意事项 #

• 以上方案都是重新挂载组件，而不是简单的重新渲染，所以组件内的局部状态会被重置（但Redux等全局状态不受影响）。
• 如果你的组件依赖了某些全局状态，重新挂载后会重新读取最新的全局状态，这和页面刷新后的行为一致。

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