React Router登录后Navigate组件无法跳转至首页的问题

1. 抽离路由保护组件 #

创建专门的路由校验组件，让登录状态校验逻辑能响应user的状态变化：

import { Navigate, Outlet } from 'react-router-dom';
import useAuthContext from './hooks/useAuthContext';

export default function ProtectedRoute() {
  const { user } = useAuthContext();
  
  if (!user) {
    return <Navigate to="/login" replace />;
  }
  
  return <Outlet />;
}

2. 重构路由配置 #

将路由配置移到组件外部，避免每次渲染重复创建router实例，同时用保护组件包裹需要登录才能访问的页面：

import Navbar from "./components/Navbar"
import Home from "./routes/Home"
import Signup from "./routes/Signup"
import Login from "./routes/Login"
import ProtectedRoute from './components/ProtectedRoute';
import { createBrowserRouter, createRoutesFromElements, Route, RouterProvider } from "react-router-dom"

const router = createBrowserRouter(
  createRoutesFromElements(
    <Route path="/" element={<Navbar />}>
      <Route element={<ProtectedRoute />}>
        <Route index element={<Home />} />
      </Route>
      <Route path="/signup" element={<Signup />} />
      <Route path="/login" element={<Login />} />
    </Route>
  )
)

export default function App() {
  return <RouterProvider router={router} />
}

3. 确保登录后正确更新用户状态 #

在Login组件中，登录成功必须同步更新AuthContext中的user状态，示例如下：

import { useAuthContext } from '../hooks/useAuthContext';
import { useNavigate } from 'react-router-dom';

export default function Login() {
  const { login } = useAuthContext();
  const navigate = useNavigate();

  const handleLogin = async (credentials) => {
    const res = await fetch('/api/login', {
      method: 'POST',
      body: JSON.stringify(credentials),
      headers: { 'Content-Type': 'application/json' }
    });
    const user = await res.json();

    if (res.ok) {
      login(user);
      navigate('/', { replace: true });
    }
  };

  // 组件渲染逻辑...
}

问题根源分析 #

• 原代码中router在App组件内部创建，每次组件渲染都会生成新的router实例，RouterProvider无法正确响应这种重复创建的实例，导致路由规则无法跟随user状态更新。
• 直接在路由element中写!user ? <Navigate /> : <Home />只会在router初始化时执行一次，后续user状态变化时不会重新触发校验逻辑。
• 使用独立的ProtectedRoute组件可以让校验逻辑在组件内部响应状态变化，每次user更新都会重新判断并执行跳转逻辑。

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