React Router v6中Loader函数重定向出现302状态码如何解决？

首先明确：loader是React Router在路由匹配后、组件渲染前运行的路由级数据获取函数，它不在React组件的渲染上下文里，所以根本没法用useNavigate、useHistory这些依赖组件上下文的Hook，这是设计限制，必须用React Router提供的redirect方法来处理跳转，你代码里用throw redirect("/login")的思路是正确的。

关于302状态码的问题：

• 如果是纯客户端渲染（CSR）：你在开发者工具里看到的302是React Router模拟的HTTP重定向语义，实际并没有向服务器发送真实的302请求，页面跳转是客户端完成的，这属于正常行为，无需纠结。
• 如果是服务器端渲染（SSR）：抛出redirect会让服务器返回302状态码，这完全符合HTTP规范——未认证用户访问受保护资源时，服务器返回临时重定向到登录页是合理的。如果确实需要修改状态码（比如改成303），可以给redirect传第二个参数：

  throw redirect("/login", 303);
  

另外建议优化重定向逻辑，携带用户原本要访问的路径，登录成功后可跳回原页面，代码示例：

export async function loader({ request }) {
  try {
    requireAuth();
    return await getVans();
  } catch (error) {
    // 获取当前用户的目标访问路径
    const from = new URL(request.url).pathname;
    // 重定向到登录页并携带原路径参数
    throw redirect(`/login?from=${encodeURIComponent(from)}`);
  }
}

后续在登录页面处理返回逻辑：

// 登录页的loader获取原路径参数
export async function loader({ request }) {
  const url = new URL(request.url);
  const from = url.searchParams.get("from") || "/";
  return { from };
}

// 登录成功后跳回原路径
async function handleLogin(formData) {
  await login(formData);
  const { from } = useLoaderData();
  navigate(from);
}

最后确认你的requireAuth函数逻辑正确——它需要在用户未认证时抛出错误，这样loader的catch块才能捕获并触发重定向，比如：

export function requireAuth() {
  const user = getUserFromAuth(); // 从本地存储或认证服务获取用户信息
  if (!user) {
    throw new Error("用户未认证");
  }
}

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