如何在React Router DOM的data router中仅修改URL的最后部分？

问题核心是Data Router对相对导航的逻辑和旧版路由器不同——旧版基于URL路径，Data Router则基于当前匹配的路由层级。

直接修复方案 #

修改Step2组件的导航逻辑，用".."代替空字符串路径：

function Step2() {
  const navigate = useNavigate();
  return (
    <>
      step 2
      <button onClick={() => navigate("..")}>go back to step 1</button>
    </>
  );
}

• 从Step1导航到Step2时，navigate("next")是有效的：当前子路由路径为空，相对导航到next会拼接成/some/long/path/with/ids/next。
• 从Step2返回时，navigate("..")会相对于当前子路由层级（next）向上跳转一层，正好回到空路径的Step1，URL也会恢复为/some/long/path/with/ids。

为什么旧方法失效？ #

• 用navigate("")时，Data Router会将其解析为当前父路由的根路径，最终URL会变成/some/long/path/with/ids/（带末尾斜杠），不符合预期。
• 统一用../${step[index].path}会在Step1出错：此时当前子路由为空，../会跳转到/some/long/path/with/，直接跳出了Wizard的路由范围。

通用处理思路 #

如果需要支持更多步骤，可以结合useLocation获取当前路径片段，动态生成导航路径：

// 示例：根据当前步骤索引导航
function StepComponent({ currentIndex }) {
  const navigate = useNavigate();
  const goToStep = (targetIndex) => {
    if (targetIndex < currentIndex) {
      // 返回上一级，用对应次数的".."
      navigate("../".repeat(currentIndex - targetIndex));
    } else {
      // 前进到目标路径
      navigate(steps[targetIndex].path);
    }
  };

  return <button onClick={() => goToStep(currentIndex - 1)}>返回上一步</button>;
}

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