React项目路由刷新跳转至根路径且登出后未跳转登录页问题求助

问题根源 #

你遇到的刷新跳转问题核心是用户身份校验是异步逻辑，页面刷新时admin初始值为null，在/verify接口请求未完成时，路由逻辑就会先触发<Redirect to="/login"/>，等接口请求完成admin变为已登录状态后，/login路由的判断逻辑又会触发重定向到根路径/，因此丢失了刷新前的路由地址。

你之前用admin !== null && (对应路由代码)的写法解决了刷新跳转，但登出时没有对应重定向逻辑，所以会停留在当前页面。

解决方法 #

新增加载状态标识身份校验进度，调整路由结构，在校验完成前不执行重定向逻辑，同时保留登出后的自动跳转能力，修改后的代码如下：

import Sidebar from "./components/sidebar/Sidebar";
import Topbar from "./components/topbar/Topbar";
import "./App.css";
import Home from "./pages/home/Home";
import { BrowserRouter as Router, Switch, Route, Redirect } from "react-router-dom";
import UserList from "./pages/userList/UserList";
import User from "./pages/user/User";
import NewUser from "./pages/newUser/NewUser";
import ProductList from "./pages/productList/ProductList";
import Product from "./pages/product/Product";
import NewProduct from "./pages/newProduct/NewProduct";
import Login from "./pages/login/Login";
import { userRequest } from "./requestMethods";
import { useState, useEffect } from "react"; // 若未引入useState/useEffect需补上该行

function App() {
  const [admin, setAdmin] = useState(null)
  // 新增加载状态：标识用户身份校验是否完成
  const [authLoading, setAuthLoading] = useState(true)

  useEffect(() => {
    const verifyUser = async () => {
      try {
        const res = await userRequest.get('/verify')
        setAdmin(res.data)
      } catch (error) {
        console.log(error)
        setAdmin(null)
      } finally {
        // 无论请求成功失败，都结束加载状态
        setAuthLoading(false)
      }
    }
    verifyUser()
  }, [])

  // 校验未完成时显示加载态，不执行路由跳转逻辑，避免误跳转
  if (authLoading) return <div>加载中...</div> // 可替换为你的自定义加载组件

  return (
    <div>
      <Router>
        <Switch>
          <Route path="/login">
            {admin ? <Redirect to="/" /> : <Login/> }
          </Route>
          {/* 所有受保护的路由统一判断 */}
          <Route path="*">
            {!admin ? (
              <Redirect to="/login"/>
            ) : (
              <>
                <Topbar />
                <div className="container">
                  <Sidebar />
                  <Switch>
                    <Route exact path="/">
                      <Home />
                    </Route>
                    <Route path="/users">
                      <UserList />
                    </Route>
                    <Route path="/user/:userId">
                      <User />
                    </Route>
                    <Route path="/newUser">
                      <NewUser />
                    </Route>
                    <Route path="/products">
                      <ProductList />
                    </Route>
                    <Route path="/product/:productId">
                      <Product />
                    </Route>
                    <Route path="/newproduct">
                      <NewProduct />
                    </Route>
                  </Switch>
                </div>
              </>
            )}
          </Route>
        </Switch>
      </Router>
    </div>
  );
}

export default App;

补充说明 #

登出操作时记得调用setAdmin(null)，即可触发自动跳转到登录页的逻辑。

内容的提问来源于stack exchange，提问作者João Pedro Carvalho