ReactJS路由传参及路由保护实现方法咨询

问题1：如何传递auth props给Login组件并更新其值 #

你当前的auth是一个常量，无法实现状态更新，需要改成React状态来管理，再将状态和更新方法传递给Login组件：

1. 在App组件中用useState管理auth状态
2. 将auth和setAuth作为props传入Login组件
3. 在Login组件内部调用setAuth来更新登录状态

修改后的App组件代码：

import "./App.css";
import { useState } from "react";
import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";

import Home from "./pages/Home";
import Login from "./pages/Login";
import RequestDemo from "./pages/RequestDemo";

function App() {
  // 用state管理登录状态，初始值可根据本地存储判断（避免刷新丢失）
  const [auth, setAuth] = useState(() => {
    return localStorage.getItem("isAuthenticated") === "true";
  });

  const Private = ({ children }) => {
    return auth ? children : <Navigate to="/login" />;
  };

  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        {/* 传递auth状态和更新方法给Login */}
        <Route path="/login" element={<Login setAuth={setAuth} />} />
        <Route 
          path="/RequestDemo" 
          element={
            <Private>
              <RequestDemo />
            </Private>
          } 
        />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

Login组件示例（内部更新auth）：

// pages/Login.jsx
import { useNavigate, useLocation } from "react-router-dom";

export default function Login({ setAuth }) {
  const navigate = useNavigate();
  const location = useLocation();
  // 获取用户原本要访问的页面，登录后跳转回去
  const from = location.state?.from?.pathname || "/";

  const handleLogin = () => {
    // 模拟登录验证逻辑
    setAuth(true);
    // 持久化状态，避免刷新丢失
    localStorage.setItem("isAuthenticated", "true");
    // 跳转到目标页面
    navigate(from, { replace: true });
  };

  return (
    <div>
      <h2>登录页</h2>
      <button onClick={handleLogin}>登录</button>
    </div>
  );
}

问题2：当前Private组件的实现是否合理？ #

你的实现方式不合理，存在几个关键问题：

1. auth是常量而非状态：登录后不会触发组件重新渲染，就算登录成功也会一直跳转到登录页
2. 不符合react-router-dom v6的推荐用法：v6更建议通过children或Outlet来传递受保护组件，而非直接传入Component props
3. 未处理登录跳转逻辑：用户访问受保护路由被拦截后，登录后无法自动跳回原页面

合理的改进方案

调整Private组件为接收children和auth状态，同时结合useLocation记录原路径：

import { Navigate, useLocation } from "react-router-dom";

const Private = ({ children, auth }) => {
  const location = useLocation();
  // 未登录时跳转到登录页，并携带原路径信息
  return auth ? (
    children
  ) : (
    <Navigate to="/login" state={{ from: location }} replace />
  );
};

这样修改后，Private组件能响应auth状态变化，且登录后可自动跳回用户原本要访问的页面，完全适配react-router-dom v6的路由逻辑。

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