React登录后重定向异常：未跳转至指定shipping页面求助

问题出在相对路径与绝对路径的混淆：当调用navigate(redirect)时，redirect的值是"shipping"（无前缀斜杠），React Router会将其解析为相对当前页面路径的子路径。当前页面是/login，所以最终跳转路径变成了/login/shipping，而非预期的根路径下的/shipping。

具体修改步骤 #

1. 正确解析URL参数并生成绝对路径
   替换原redirect变量定义，使用URLSearchParams（更可靠的URL参数解析方式，避免split方法在参数含特殊字符时出错），同时给路径加上前缀斜杠确保为绝对路径：

   // 替换原来的redirect定义
   const searchParams = new URLSearchParams(location.search);
   const redirectParam = searchParams.get('redirect');
   const redirect = redirectParam ? `/${redirectParam}` : "/";
   

2. 保持SignUp链接参数的正确性
   注册页面的跳转参数不需要带斜杠，所以在SignUp的Link中使用原始的redirectParam即可：

   <Link
     to={redirectParam ? `/signup?redirect=${redirectParam}` : "/signup"}
   >
     SingUp
   </Link>
   

修改后的关键代码片段 #

const Login = () => {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  const location = useLocation();
  const navigate = useNavigate();

  // 正确解析redirect参数并生成绝对路径
  const searchParams = new URLSearchParams(location.search);
  const redirectParam = searchParams.get('redirect');
  const redirect = redirectParam ? `/${redirectParam}` : "/";
  console.log(`Login Redirect ${redirect}`);

  const dispatch = useDispatch();
  const userLogin = useSelector((state) => state.userLogin);

  const { loading, error, userInfo } = userLogin;

  useEffect(() => {
    if (userInfo) {
      navigate(redirect);
    }
  }, [userInfo, redirect]);

  // ... 其他代码不变

  return (
    // ... 其他JSX结构不变
    <Link
      to={redirectParam ? `/signup?redirect=${redirectParam}` : "/signup"}
    >
      SingUp
    </Link>
    // ... 其他JSX结构不变
  );
};

修改后，登录成功后navigate(redirect)会跳转到根路径下的/shipping，而非相对路径的/login/shipping。

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