React嵌套路由能否使用../匹配上级路径？

首先明确：React Router 不支持在路由路径中使用 ../ 这种相对路径写法，你示例里的../summary无法正确匹配路由，得换更合理的实现方式。

针对你的需求——在/articles/:article/:tab路由下，既要在父组件ArticlePage中使用tab参数，又要根据tab渲染对应内容组件，推荐两种可行方案：

方案一：直接根据tab参数条件渲染 #

既然ArticlePage已经通过useParams()拿到了tab参数，完全可以直接用条件判断渲染对应内容组件，不需要再嵌套Routes，代码更简洁：

function ArticlePage() {
  const { article, tab } = useParams();

  const getContentComponent = () => {
    switch(tab) {
      case 'summary':
        return <MarkdownContent />;
      case 'examples':
        return <ExamplesContent />;
      default:
        return <NotFoundContent />; // 处理未知tab的情况
    }
  };

  return (
    <Container SomeAttributeThatDependsOnTab={tab}>
      <h1>{article}</h1>
      <h2>selected tab: {tab}</h2> 
      {getContentComponent()}
    </Container>
  );
}

function App() {
  return (
    <Routes>
      <Route path="/articles/:article/:tab" element={<ArticlePage />} />
    </Routes>
  );
}

方案二：使用嵌套路由+Outlet组件 #

如果坚持用嵌套路由的方式，需要调整路由结构，把父路由设为/articles/:article，再嵌套子路由:tab，通过Outlet在父组件中渲染子内容：

import { Outlet, useParams } from 'react-router-dom';

// 父组件：负责展示公共内容，可获取article和tab参数
function ArticlePage() {
  const { article, tab } = useParams();

  return (
    <Container SomeAttributeThatDependsOnTab={tab}>
      <h1>{article}</h1>
      <h2>selected tab: {tab}</h2> 
      {/* 渲染子路由对应的内容组件 */}
      <Outlet />
    </Container>
  );
}

// 路由配置
function App() {
  return (
    <Routes>
      <Route path="/articles/:article" element={<ArticlePage />}>
        {/* 嵌套子路由，对应不同tab */}
        <Route path="summary" element={<MarkdownContent />} />
        <Route path="examples" element={<ExamplesContent />} />
        {/* 可选：添加默认路由，处理访问/articles/:article时的默认展示 */}
        <Route index element={<MarkdownContent />} />
      </Route>
    </Routes>
  );
}

这种方式的优势是路由结构更清晰，后续新增tab只需在父路由下添加新子路由，无需修改ArticlePage的条件判断逻辑。

为什么../不可行？ #

React Router 的嵌套路由路径是基于父路由路径进行路径追加匹配的，相对路径指在父路径基础上添加新路径段，而../这种文件系统的相对路径写法不属于路由路径的合法定义，路由系统无法识别它去匹配上层参数位置，所以这个方案从根本上不可行。

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