React 18中useNavigate跳转异常：登录后未到shipping页面问题

问题出在你获取的redirectUrl是不带开头斜杠的shipping，React Router的navigate方法会把这种不带斜杠的路径当作相对路径处理，也就是基于当前页面的URL（/signin）进行拼接，最终就变成了/signin/shipping。

给你两个可行的解决办法：

方法一：统一将跳转路径转为绝对路径 #

修改redirectUrl的获取逻辑，确保它始终以斜杠开头：

const redirectParam = searchParams.get('redirect') || '/';
const redirectUrl = redirectParam.startsWith('/') ? redirectParam : `/${redirectParam}`;

这样不管参数里传的是shipping还是/shipping，最终都会处理成绝对路径/shipping，navigate就能正确跳转到根目录下的shipping页面。

方法二：在跳转时补全绝对路径 #

直接在navigate调用时处理路径：

useEffect(() => {
  if (userInfo) {
    // 处理路径，避免出现//的情况
    const targetUrl = redirectUrl === '/' ? '/' : `/${redirectUrl}`;
    navigate(targetUrl, {replace: true});
  }
}, [userInfo, redirectUrl, navigate]);

另外要说明：你之前加的{replace: true}只是修改浏览器历史记录的行为（替换当前记录而不是新增），和路径解析错误的问题无关，所以不管加不加都解决不了路径拼接的问题，核心还是要把相对路径转为绝对路径。

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