React-Router-Dom 6中useNavigate跳转触发页面刷新如何解决

useNavigate触发整页刷新和Redux Persist本身无关，本质是这次跳转没有被React Router识别为SPA内部导航，回退到了浏览器原生页面跳转逻辑——整页重载会重新执行应用初始化流程，自然会触发Redux Persist的rehydrate环节。
你代码中使用的多层相对路径../../modules/${id}是最高发的诱因：React Router v6的相对路径计算基准是路由配置的嵌套层级，不是浏览器地址栏的URL目录层级，多层../很容易出现路径计算结果和实际路由不匹配的问题，Router识别不到对应路由时就会触发原生跳转。

• 优先使用绝对路径跳转
  直接用根路径开头的绝对路径可以完全规避相对路径计算错误的问题，是最稳妥的写法：

  const navigate = useNavigate();
  // 替换原有多层相对路径，根据实际路由前缀补全根路径即可
  navigate(`/modules/${id}`);
  

  如果业务场景确实需要用相对路径，不要按照URL斜杠数量或者文件目录层级写../，要对照路由配置的父子嵌套关系计算相对偏移量。
• 排查原生跳转冲突
  检查触发跳转的DOM元素是否绑定了会触发原生导航的逻辑：如果把跳转逻辑绑定在原生<a>标签上，没有阻止默认事件的话，会同时触发a标签原生跳转和navigate逻辑，直接导致整页刷新。这类场景直接用React Router提供的Link/NavLink组件替代原生a标签即可：

  // 错误写法
  <a href={`/modules/${id}`} onClick={() => navigate(`/modules/${id}`)}>进入模块</a>
  
  // 正确写法
  import { Link } from 'react-router-dom';
  <Link to={`/modules/${id}`}>进入模块</Link>
  

• 核对Router的basename配置
  如果项目部署在服务器子路径下，要确保给BrowserRouter/HashRouter配置的basename和实际部署前缀完全一致，末尾不要多余斜杠，否则会出现路径匹配失败，触发原生跳转：

  // 示例：项目部署在https://xxx.com/admin路径下的配置
  <BrowserRouter basename="/admin">
    <App />
  </BrowserRouter>
  

• 排除持久化配置冲突
  检查Redux Persist的配置，不要把router相关的状态加入持久化白名单，避免持久化的路由状态和当前Router实例的内存状态冲突，同时尽量在PersistGate加载完成后再触发路由跳转逻辑。

验证标准：跳转时打开浏览器控制台Network面板，如果没有发起新的document类型请求，就说明是SPA内部跳转，不会触发Redux Persist的重注水流程。

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