React应用刷新任意路由自动跳转首页问题排查

两处核心逻辑错误直接导致非首页路由刷新后强制跳首页：

• 登录态校验流程与加载状态完全脱节：现有逻辑里isLoading靠固定500ms延时关闭，完全不等待登录态校验接口/auth/login/success的返回结果。页面刷新时user初始值为null，500ms计时结束后加载态关闭，此时若接口尚未返回用户信息，路由守卫判定user为假值，会先跳转至登录页；等后续接口返回用户信息写入user状态后，登录页路由规则判定用户已登录，又会强制重定向到/home，最终表现为无论刷新哪个业务页面，都会跳到首页。
• 根路径/的路由规则未关联登录态判断：加载结束后无论用户是否登录，都直接跳转至登录页，和其他路由的权限逻辑不统一。
• 后端接口逻辑不全：现有/auth/login/success接口只处理了已登录场景的返回，未登录场景下没有返回响应，会导致请求挂起。

1. 废弃固定延时控制加载态的逻辑，把加载状态和登录态接口请求的生命周期绑定：接口发起时设为加载中，接口请求成功/失败走完回调后再关闭加载态，保证路由判断时user状态已经是准确的登录态结果。
2. 所有路由统一在加载态未结束时渲染加载页/启动页，不提前做重定向判断。
3. 修正根路径的跳转逻辑：已登录跳首页，未登录跳登录页。
4. 补全后端接口的未登录场景返回逻辑。

前端App组件代码 #

import Login from "./pages/Login";
import Home from "./pages/Home";
import '../src/App.css'
import { BrowserRouter, Routes,Route, Navigate } from "react-router-dom";
import BuyerCategoryPage from './pages/BuyerCategorypage'
import SellerHomepage from "./pages/SellingDetails";
import Profile from './pages/Profile'
import Cycle from './pages/ProductDetails'
import BuyerHomepage from "./pages/BuyerHomepage";
import SellerCategorypage from "./pages/SellerCategorypage";
import {  useEffect, useState } from "react";

// 封装通用路由守卫，减少重复判断逻辑
const ProtectedRoute = ({ children, user, isLoading }) => {
  // 登录态校验未完成时，渲染启动加载页，不做跳转
  if (isLoading) return <Splash />;
  // 校验完成未登录，跳登录页
  if (!user) return <Navigate to="/auth/login" replace />;
  // 已登录，渲染对应业务页面
  return children;
}

function App() {
  const [user,setUser] = useState(null)
  // 加载状态默认开启，等登录态接口返回后再关闭
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const getUser = async () => {
      try {
        const res = await fetch('http://localhost:5000/auth/login/success', {
          method: "GET",
          credentials: 'include',
          headers: {
            Accept: "application/json",
            "Content-Type": "application/json",
            'Access-Control-Allow-Credentials': true,
          },
        })
        if (res.status === 200) {
          const resObject = await res.json();
          setUser(resObject.user)
        } else {
          setUser(null)
        }
      } catch (err) {
        console.log(err)
        setUser(null)
      } finally {
        // 无论接口成功失败，都关闭加载态
        setIsLoading(false)
      }
    }
    getUser();
  }, []);

  return (
    <BrowserRouter>
      <div className="App">
        <Routes>
          {/* 修正根路径跳转逻辑 */}
          <Route path="/" element={isLoading ? <Splash /> : user ? <Navigate to="/home" replace /> : <Navigate to="/auth/login" replace />} />
          <Route path="/home" element={<ProtectedRoute user={user} isLoading={isLoading}><Home/></ProtectedRoute>} />
          <Route path="/auth/login" element={isLoading ? <Splash /> : user ? <Navigate to={'/home'} replace /> : <Login/>} />
          <Route path="/buyercategory" element={<ProtectedRoute user={user} isLoading={isLoading}><BuyerCategoryPage/></ProtectedRoute> } />
          <Route path="/buyerhomepage" element={<ProtectedRoute user={user} isLoading={isLoading}><BuyerHomepage/></ProtectedRoute>} />
          <Route path="/sellercategory" element={<ProtectedRoute user={user} isLoading={isLoading}><SellerCategorypage/></ProtectedRoute>} />
          <Route path="/sellerhomepage" element={<ProtectedRoute user={user} isLoading={isLoading}><SellerHomepage/></ProtectedRoute>} />
          <Route path="/profile" element={<ProtectedRoute user={user} isLoading={isLoading}><Profile/></ProtectedRoute>} />
          <Route path="/productdetails/:productId" element={<ProtectedRoute user={user} isLoading={isLoading}><Cycle /></ProtectedRoute>} />
        </Routes>
    </div>
    </BrowserRouter> 
  );
}

export default App;

后端接口补全代码 #

router.get('/auth/login/success', (req, res) => {
  if (req.user) {
    res.status(200).json({
      "success": true,
      "message": "successfull",
      "user":req.user, 
    })
  } else {
    // 补全未登录场景的返回，避免请求挂起
    res.status(401).json({
      success: false,
      message: "user not authenticated"
    })
  }
})

• 所有重定向都加了replace属性，替换路由栈历史记录，避免用户点击返回按钮时出现路由来回跳转的异常。
• 接口请求加了finally回调，覆盖网络报错、接口返回非200的异常场景，不会出现页面一直卡在启动页的问题。
• 封装通用路由守卫组件后，后续新增受权限控制的页面直接套组件即可，不用重复写三元判断逻辑。

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