React Router v6嵌套路由navigate无法正确返回上一级路径问题

问题根因 #

React Router v6 中所有相对路径跳转的解析基准，是当前调用useNavigate/渲染<Link>的组件所在的路由匹配路径，不是当前浏览器地址栏的完整路径。
你把返回按钮写在匹配/shop/*的父级Shop/ShopPage组件里，不管当前子路由跳转到/shop/1/items/create还是更深层级，这个组件的路由匹配上下文始终是/shop/:id层级，所以调用navigate("..")的时候，只会向上跳一层到/shop，自然不符合预期。
另外原有代码的子路由配置也存在问题：嵌套在Routes里的子路径不要加前导斜杠，加了前导斜杠会被识别为绝对路径，会进一步打乱相对路径的解析基准。

正确实现方案 #

不需要每个页面重复写头部代码，基于当前实际URL计算上一级路径即可，完全规避navigate(-1)依赖历史栈的缺陷，也不需要侵入子页面逻辑。

第一步：修正路由配置 #

首先把所有嵌套路由的路径前导斜杠去掉，保证路由匹配关系正确：

// 根路由App.js
export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="*" element={<Link to="/shop">Shop</Link>} />
        <Route path="/shop/:id/*" element={<ShopPage />} />
      </Routes>
    </BrowserRouter>
  );
}

// ShopPage内部路由
const ShopPage = () => {
  // 其他原有业务逻辑保留
  return (
    <div id="shop-page">
      <Card>
        <div id="shop-page-header">
          {/* 返回按钮逻辑见下一步 */}
          <Icon canHover onClick={handleBack} icon="BiArrowBack"/>
          <Title text={state.shop ? state.shop.name : ""}/>
        </div>
      </Card>
      <div id="shop-page-content">
        <Routes>
          {/* 去掉路径前的/，改为相对父路由的写法 */}
          <Route path="*" element={<div onClick={() => navigate('./items')}>首页</div>}/>
          <Route path="items/*" element={<ItemsPage shop={state.shop}/>}/>
          <Route path="items/create" element={<ItemPage/>}/>
        </Routes>
      </div>
    </div>
  )
}

第二步：实现基于当前路径的上一级跳转逻辑 #

在头部组件里直接解析当前地址的路径，截取上一级路径即可，逻辑通用，所有子路由下都能正确返回：

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

const handleBack = () => {
  // 拆分当前路径段，过滤空值
  const pathSegments = location.pathname.split('/').filter(Boolean);
  // 已经是当前路由根路径的话可按需跳转到站点首页，或直接不响应
  if (pathSegments.length <= 2) return;
  // 去掉最后一段路径就是上一级地址
  const parentPath = `/${pathSegments.slice(0, -1).join('/')}`;
  navigate(parentPath);
};

如果需要更严谨的路由参数、查询字符串匹配，也可以结合matchPath做定制化解析，上面的简化写法已经能覆盖绝大多数业务场景。

可选优化：支持子页面自定义返回逻辑 #

如果部分子页面需要拦截返回操作（比如有未保存内容弹确认框、跳转到指定页面），可以通过Outlet上下文透传配置方法，完全不需要重复编写头部UI：

• 父组件侧实现：

const [customBackHandler, setCustomBackHandler] = useState(null);
// 实际触发返回时优先使用子页面自定义逻辑
const handleBack = () => {
  if (customBackHandler) return customBackHandler();
  // 默认走通用上一级路径逻辑
  const pathSegments = location.pathname.split('/').filter(Boolean);
  if (pathSegments.length <= 2) return navigate('/');
  navigate(`/${pathSegments.slice(0, -1).join('/')}`);
}
// 透传上下文给子路由
<Outlet context={{ setCustomBackHandler }} />

• 子页面侧按需自定义：

const { setCustomBackHandler } = useOutletContext();
useEffect(() => {
  setCustomBackHandler(() => {
    // 自定义逻辑示例：有未保存内容时弹确认
    if (formIsDirty) {
      const confirmLeave = window.confirm('有未保存内容，确定离开？');
      if (!confirmLeave) return;
    }
    return navigate('/custom/target/path');
  });
  // 组件卸载时重置自定义逻辑，避免影响其他页面
  return () => setCustomBackHandler(null);
}, [])

其他方案的缺陷 #

• navigate(-1)：完全依赖浏览器历史栈，用户新开标签页直接访问、从外部站点跳转进来时，回退会直接跳出当前站点，不符合路由层级预期
• 每个页面单独写头部：重复代码多，维护成本高，UI一致性难以保证
• 硬编码跳转路径：路由调整时需要全量修改所有硬编码地址，极易出现漏改bug

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