React多路由应用中Redux Toolkit无法正常工作的咨询

核心结论 #

Redux Toolkit（RTK）完全支持多路由场景，不需要额外的特殊配置。你的代码逻辑本身是正确的，跨路由状态同步异常的问题大概率出在路由切换的方式上。

问题分析 #

从你提供的代码来看，所有配置都符合RTK和React Router的规范：

• Redux的Provider正确包裹了BrowserRouter，确保所有路由组件都能访问全局store
• Slice的定义、useDispatch/useSelector的使用都符合RTK的要求
• 状态更新的逻辑（直接修改state.value）是RTK允许的（内部通过Immer处理不可变更新）

导致状态不同步的常见原因：
你可能是通过地址栏手动输入路由或刷新页面来切换路由，这种方式会触发整个页面的重新加载，Redux的内存状态会被重置，自然看不到之前修改的状态。

解决方案 #

1. 使用React Router的客户端导航（推荐） #

添加Link组件实现单页应用的客户端跳转，避免页面刷新，这样Redux状态会被完整保留。修改你的App.js：

import Profile from "./components/profile";
import Login from './components/login.js';
import {Route,Routes, Link} from 'react-router-dom';

function App() {
  return (
    <>
      <nav style={{padding: '10px'}}>
        <Link to="/">Profile页面</Link>
        <Link to="/log" style={{marginLeft: '15px'}}>Login页面</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Profile/>}/>
        <Route path="/log" element={<Login/>}/>
      </Routes>
    </>
  );
}

export default App;

2. 可选：持久化状态（应对页面刷新） #

如果需要页面刷新后依然保留状态，可以使用redux-persist将状态存储到本地存储中，这是额外的增强功能，并非多路由场景的必须项。

验证步骤 #

1. 启动应用后，通过页面上的Link切换到Login页面
2. 点击Login按钮，输入颜色值（比如red）
3. 通过Link切回Profile页面，此时应该能看到文字颜色变为红色，同时显示用户信息abdullah

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