React Router v6中useNavigate无法正确替换动态路径参数，路径出现嵌套追加问题

嗨，我看到你从React Router v4升级到v6后，在使用useNavigate时遇到了路径嵌套追加的问题——原本想替换最后一段的step参数，结果变成了0/1这种嵌套路径，这确实是v6和v4在路由导航逻辑上的一个关键差异，我来帮你解决这个问题～

问题原因 #

在React Router v4中，history.replace(${nextStep})的逻辑是替换当前路由的最后一段路径，所以当你在/customer/123/accounting/chargeCancellation/0路径下调用它，会把最后一段的0换成1。但到了v6，useNavigate的相对路径逻辑变了：它会把传入的字符串作为子路径追加到当前路径末尾，而不是替换最后一段，这就导致了0/1这种不符合预期的嵌套路径。

解决方案 #

这里有两种可靠的解决方式，你可以根据自己的偏好选择：

方案一：使用绝对路径导航

直接构建完整的目标路由路径，明确替换掉step参数。这样能确保导航路径完全符合预期，不会有相对路径的歧义：

修改handlePrevStep和handleSubmit中的navigate调用：

// handlePrevStep里的修改
const handlePrevStep = () => {
  const prevStep = currentStep - 1;
  if (currentStep === 0) {
    return navigate(-1);
  }
  // 替换为绝对路径
  return navigate(`/customer/${customerOuid}/${routeTab}/${routeFeature}/${prevStep}`, { replace: true });
};

// handleSubmit里的修改
const handleSubmit = (triggerPolling: () => void) => {
  const nextStep = currentStep + 1;
  if (currentStep === steppers.length - 1 && redirectPath) {
    if (triggerPolling) {
      return triggerPolling();
    }
    return navigate(redirectPath, { replace: true });
  }
  // 替换为绝对路径
  return navigate(`/customer/${customerOuid}/${routeTab}/${routeFeature}/${nextStep}`, { replace: true });
};

方案二：使用v6的相对路由语法

React Router v6支持用../来表示“回到上一级路径”，通过这个语法可以先移除当前的step参数，再追加新的step值：

// handlePrevStep里的修改
const handlePrevStep = () => {
  const prevStep = currentStep - 1;
  if (currentStep === 0) {
    return navigate(-1);
  }
  // 用../回到上一级，再追加新的step
  return navigate(`../${prevStep}`, { replace: true });
};

// handleSubmit里的修改
const handleSubmit = (triggerPolling: () => void) => {
  const nextStep = currentStep + 1;
  if (currentStep === steppers.length - 1 && redirectPath) {
    if (triggerPolling) {
      return triggerPolling();
    }
    return navigate(redirectPath, { replace: true });
  }
  // 用../回到上一级，再追加新的step
  return navigate(`../${nextStep}`, { replace: true });
};

小提示 #

两种方案都能解决问题：绝对路径的好处是逻辑更直观，不容易出错；相对路径的好处是不需要拼接所有参数，代码更简洁。你可以根据自己的项目场景选择～

备注：内容来源于stack exchange，提问作者KolaCaine