React Router新版本中如何调整带redirect参数的navigate跳转

问题场景 #

原通过history.push实现未登录跳转登录页、登录完成后跳转到shipping页面的逻辑：

const checkoutHandler = () => {
    history.push('/login?redirect=shipping')
}

改用React Router v6+的navigate方法后：

navigate('/login?redirect=shipping')

实际跳转至http://localhost:3000/login/shipping，而非预期的http://localhost:3000/shipping，控制台提示No routes matched location "/login/shipping"。

问题原因 #

核心问题出在登录页处理redirect参数的跳转逻辑：若直接使用navigate(redirect)且redirect值为shipping（无前缀/），React Router会将其识别为当前路径（/login）的相对子路径，导致错误跳转。

解决方案 #

在登录页中使用新版React Router的useSearchParams钩子正确解析query参数，并以绝对路径方式跳转：

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

const Login = () => {
  const [searchParams] = useSearchParams();
  const navigate = useNavigate();

  // 登录成功后的跳转逻辑
  const handleLoginSuccess = () => {
    // 获取redirect参数，默认跳转至首页
    const redirectPath = searchParams.get('redirect') || '/';
    // 确保以绝对路径跳转，避免相对路径错误
    navigate(redirectPath.startsWith('/') ? redirectPath : `/${redirectPath}`);
  };

  // ...其他登录相关逻辑
};

额外验证 #

确认调用navigate时的路径写法正确：

// 正确写法（绝对路径带query参数）
navigate('/login?redirect=shipping');

该写法本身无问题，无需修改，重点是登录页内的参数解析与跳转逻辑。

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