React Router Dom v6中navigate无法重定向至shipping页面问题求助

一、/login?redirect=shipping 的作用 #

这是带查询参数的路由跳转地址，拆解后逻辑很明确：

• /login：指定跳转目标为登录页面的路由路径
• ?redirect=shipping：URL的查询参数部分，redirect是参数名，shipping是参数值
  它的核心作用是给登录页面传递“登录后跳转目标”的指令——用户原本在结账流程中（要进入收货地址页/shipping），但因为未登录被引导到登录页，登录完成后系统会自动跳转到/shipping，而不是默认首页，以此保证用户操作的连贯性。

二、React Router v6 重定向失败的修复方案 #

你的代码存在3个关键错误，逐个修正即可解决问题：

1. 修正CartScreen的跳转参数名 #

你当前写的是navigate('/login?navigate=shipping')，参数名误写为navigate，但LoginScreen里是读取redirect参数，需改成：

const checkoutHandler = () => {
  navigate('/login?redirect=shipping')
}

2. 用v6专属钩子安全读取查询参数 #

手动用split处理URL查询参数容易出错（比如多参数场景），v6提供了useSearchParams钩子来可靠读取参数，替换LoginScreen里的redirect变量：

import { useSearchParams, useNavigate } from 'react-router-dom';

// ...其他代码
const navigate = useNavigate();
const [searchParams] = useSearchParams();
const redirect = searchParams.get('redirect') || '/'; // 取不到参数时默认跳首页

3. 修正LoginScreen的跳转逻辑 #

• 给useEffect添加正确的依赖数组，避免React警告且保证逻辑触发：

useEffect(() => {
  if (localStorage.getItem('userInfo') !== null) {
    navigate(redirect);
  }
}, [navigate, redirect]); // 必须添加navigate和redirect作为依赖

• 登录成功（isSuccess为true）时，跳转到redirect指定的页面，而非固定首页：

isSuccess && navigate(redirect);

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