ReactJS页面刷新跳转问题及代码逻辑精简求助

原代码问题分析 #

1. 直接修改Redux的Auth状态，违反Redux单向数据流原则，易导致状态不一致
2. 登录状态（isLogin）同时依赖localStorage和Redux，逻辑重复且易引发冲突
3. 按登录状态拆分路由结构，状态变更时可能触发路由意外重置，导致隐私政策页面刷新后跳首页
4. 重复的localStorage判断逻辑，代码冗余

优化后的代码 #

import { useSelector, useDispatch } from 'react-redux';
import { Navigate, useLocation } from 'react-router-dom';
// 请替换为你实际的Redux action路径
import { setAuth } from './store/auth/actions';

function App() {
  const { isLogin, uid } = useSelector((state: RootState) => state.Auth);
  const dispatch = useDispatch();
  const location = useLocation();

  // 初始化+localStorage变化监听
  useEffect(() => {
    const syncAuthFromStorage = () => {
      const storedUid = localStorage.getItem('uid');
      const isValidUid = storedUid && storedUid !== '' && storedUid !== 'null';
      
      if (isValidUid) {
        dispatch(setAuth({ isLogin: true, uid: storedUid }));
        getUserProfile(storedUid);
        getAllstories(storedUid);
        
        // 同步登录方式
        const methodId = localStorage.getItem('methodId');
        if (methodId) {
          localStorage.setItem('method', methodId.split('-')[0] === 'phone' ? 'phone' : 'email');
        }
      } else {
        dispatch(setAuth({ isLogin: false, uid: '' }));
      }
    };

    // 初始化同步
    syncAuthFromStorage();
    
    // 监听跨标签页localStorage变化
    const handleStorageChange = () => syncAuthFromStorage();
    window.addEventListener('storage', handleStorageChange);
    
    return () => window.removeEventListener('storage', handleStorageChange);
  }, [dispatch]);

  return (
    <div className="App">
      <BrowserRouter>
        {isLogin ? (
          <CreateLayout>
            <Routes>
              <Route path="/" element={<Dashboard />} />
              <Route path="/create" element={<Create />} />
              <Route path="*" element={<Navigate to="/" replace />} />
            </Routes>
          </CreateLayout>
        ) : (
          <Layout>
            <Routes>
              <Route path="/" element={<Index />} />
              <Route path="/privacy-policy" element={<PrivacyPolicy />} />
              {/* 未登录时仅允许访问公共路由，其余跳首页 */}
              <Route path="*" element={
                ['/', '/privacy-policy'].includes(location.pathname) 
                  ? <NotFound /> 
                  : <Navigate to="/" replace />
              } />
            </Routes>
          </Layout>
        )}
      </BrowserRouter>
    </div>
  );
}

export default App;

关键优化点 #

• 遵循Redux规范：移除直接修改Redux状态的代码，改用dispatch触发action更新状态，确保状态变更可追踪
• 统一状态管理：登录状态完全由Redux管理，初始化时同步localStorage数据，避免多源状态冲突
• 路由逻辑修复：保留按登录状态渲染布局的结构，通过精准的路由跳转控制，解决隐私政策页面刷新跳转问题
• 代码精简：合并重复的localStorage判断逻辑，抽离同步方法，减少冗余代码
• 增强健壮性：添加对methodId的存在性判断，避免空值调用split方法引发错误

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