React Router v6 useMatches面包屑：嵌套路由部分匹配缺失问题求助

问题核心 #

访问/users/:id时，useMatches仅匹配根路由(/)和详情路由(/users/:id)，无法获取/users路由的crumb，导致面包屑缺少"Users"项；但直接嵌套/users/:id到/users下会额外渲染UserList组件，不符合需求。

官方方案：调整路由结构为嵌套无渲染父路由 #

React Router的useMatches会匹配所有层级嵌套的路由节点，我们可以把/users改成一个仅渲染Outlet的父路由，将UserList设为它的index子路由，/users/:id作为另一个子路由。这样既保证路由层级被useMatches识别，又不会在访问详情页时渲染UserList。

调整后的路由配置：

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

{
  path: '/',
  element: <Layout />,
  handle: { crumb: () => 'Home' },
  children: [
    {
      path: 'users',
      // 仅渲染Outlet，不渲染任何额外组件
      element: <Outlet />,
      handle: { crumb: () => 'Users' },
      children: [
        // 仅访问/users时渲染UserList
        {
          index: true,
          element: <UserList />,
        },
        {
          path: ':id',
          element: <UserDetails />,
          handle: { crumb: () => <DynamicUserNameCrumb /> },
        },
      ],
    },
  ],
}

原理说明 #

• 嵌套路由结构下，访问/users/:id时，useMatches会依次匹配/、/users、/users/:id三个路由节点，自然能获取到所有层级的crumb。
• /users路由的element是<Outlet />，它仅负责渲染子路由的内容，不会额外渲染UserList组件；只有访问/users（无后续路径）时，index路由的UserList才会被渲染。

备选方案（不推荐） #

如果不想调整路由结构，可以在/users/:id的crumb中手动拼接"Users"项，但这种方法违背了路由配置的单一数据源原则，维护性差：

{
  path: '/users/:id',
  element: <UserDetails />,
  handle: {
    crumb: () => (
      <>
        <Link to="/users">Users</Link>
        <span> → </span>
        <DynamicUserNameCrumb />
      </>
    ),
  },
}

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