点击<a>标签时Redux Store被清空的原因及解决方案

问题根源 #

标签会触发浏览器整页刷新，而Redux Store是内存中的临时状态，页面刷新后所有JS重新加载，Store会回到初始状态，导致需要重新登录。React Router的Link/NavLink是单页应用的客户端路由，不会触发整页刷新，理应能保留Store，不生效大概率是使用方式有误。

排查并修复Link/NavLink不生效的问题 #

1. 确保应用被Router组件包裹 #

所有使用Link/NavLink的组件必须处于React Router的Router（如BrowserRouter）范围内，否则路由功能无法生效。示例代码：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import Dashboard from './pages/Dashboard';

function App() {
  return (
    <Router>
      {/* 你的导航组件、路由配置都要放在Router内部 */}
      <HeaderNav />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/dashboard" element={<Dashboard />} />
      </Routes>
    </Router>
  );
}

2. 检查Link的使用是否规范 #

• 确认正确导入Link/NavLink：

  import { Link } from 'react-router-dom';
  

• to属性填写内部路由路径，而非外部URL（外部链接仍需用）：

  // 正确用法
  <Link to="/dashboard">进入控制台</Link>
  
  // 错误用法（如果是内部路由，不要写完整URL）
  <Link to="http://yourdomain.com/dashboard">进入控制台</Link>
  

3. 排查是否有事件拦截干扰 #

如果页面有全局点击事件或自定义的事件处理逻辑，可能阻止了Link的默认行为。检查是否有类似e.preventDefault()的代码错误应用在Link元素上。

4. 自定义风格的路由组件（替代方案） #

如果需要保留标签的样式或交互逻辑，可以手动阻止默认跳转，用useNavigate实现客户端路由：

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

function CustomNavLink({ to, children, ...props }) {
  const navigate = useNavigate();

  const handleClick = (e) => {
    e.preventDefault(); // 阻止整页刷新
    navigate(to);
  };

  return <a href={to} onClick={handleClick} {...props}>{children}</a>;
}

// 使用方式
<CustomNavLink to="/dashboard">进入控制台</CustomNavLink>

关键总结 #

只要避免整页刷新，Redux Store就能在内存中保留状态。确保React Router的客户端路由正确配置，就能解决点击跳转后Store清空的问题。

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