React Router v6登录后如何跳转至用户之前访问的受保护路由？

你的代码核心问题在于受保护路由重定向到登录页时，没有传递用户原本要访问的路径信息，导致登录组件无法获取到from参数。以下是具体修复方案：

1. 修复受保护路由组件 #

修改PrivateRoute，在重定向时通过state传递当前用户试图访问的路径：

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

function PrivateRoute({ children }) {
  const location = useLocation();
  const userToken = localStorage.getItem("token");

  // 有token则渲染受保护内容，否则重定向到登录页并携带原路径
  return userToken ? (
    children
  ) : (
    <Navigate to="/login" state={{ from: location }} replace />
  );
}

export default PrivateRoute;

注：React Router v6推荐用children嵌套方式传递受保护组件，替代原component属性写法，更符合组件逻辑。

2. 调整登录组件的逻辑顺序 #

登录成功后先存储用户信息和token，再执行跳转，避免路由守卫因未及时读取到token而再次重定向：

const navigate = useNavigate();
const location = useLocation();
// 从state获取原路径，默认跳转到首页
let { from } = location.state || { from: { pathname: "/" } };
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");

async function login(e) {
  e.preventDefault();
  const data = { email, password };
  
  try {
    const result = await fetch("http://127.0.0.1:3000/login", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "Accept": "application/json"
        // 登录请求无需携带Authorization，此时还未生成有效token
      },
      body: JSON.stringify({ session: data })
    });
    
    const response = await result.json();
    if (response.error) {
      console.error("登录失败：", response.error);
      return;
    }
    
    // 先存储用户信息和token
    localStorage.setItem("user", JSON.stringify(data.email));
    localStorage.setItem("token", response.jwt);
    
    // 跳转到原请求路径
    navigate(from, { replace: true });
  } catch (err) {
    console.error("请求出错：", err);
  }
}

路由配置示例（补充） #

确保路由配置正确使用PrivateRoute包裹受保护路径：

import { Routes, Route } from "react-router-dom";
import PrivateRoute from "./PrivateRoute";
import Login from "./Login";
import CreatePost from "./CreatePost";
import Home from "./Home";

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/login" element={<Login />} />
      {/* 用PrivateRoute包裹受保护的创建文章页面 */}
      <Route path="/create" element={
        <PrivateRoute>
          <CreatePost />
        </PrivateRoute>
      } />
    </Routes>
  );
}

内容的提问来源于stack exchange，提问作者KIPROTICH DOMINIC KORIR