React Router DOM v6.0.1 访问带参子路由仍匹配父路由Items组件问题

核心原因：react-router-dom v6 的嵌套路由规则要求，父路由对应的组件必须渲染 <Outlet /> 组件作为子路由的渲染出口，你提供的路由配置本身没有问题，问题出在 <Items /> 组件内部未添加 <Outlet /> 组件。

具体修复步骤 #

• 第一步：在 Items 组件的文件头部引入 Outlet

import { Outlet } from 'react-router-dom'

• 第二步：在 Items 组件的 JSX 结构中合适的位置插入 <Outlet />，示例如下：

// Items 组件示例
function Items() {
  return (
    <div className="items-container">
      <h3>商品列表</h3>
      {/* 原有列表渲染逻辑 */}
      <ul className="items-list">
        <li>商品A</li>
        <li>商品B</li>
      </ul>
      {/* 子路由渲染出口：访问/items/3时，此处会渲染ItemsDetail组件 */}
      <Outlet />
    </div>
  )
}

可选方案：访问子路由时完全替换父组件内容 #

如果你不需要在子路由页面保留 Items 组件的内容，希望访问 /items 时渲染 Items，访问 /items/xxx 时完全替换为 ItemsDetail，可以直接修改路由配置如下，不需要改动 Items 组件：

export default function RouteConfig() {
  return (
     <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        {/* 父级路由不绑定element，子路由为同级渲染关系 */}
        <Route path="items">
          {/* index路由匹配父路径/items */}
          <Route index element={<Items />} />
          <Route path=":itemId" element={<ItemsDetail />} />
        </Route>
        <Route path="*" element={<NotFound />} />
      </Routes>
  </BrowserRouter>
  )
}

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