React-router v6的面包屑导航和部分匹配路由

Question

我正在使用react-router-dom v6.8.1（截至目前最新版本），之前使用一个名为use-react-router-breadcrumbs的第三方库来设置面包屑导航，但根据它的文档，他们现在推荐使用“内置的react-router方式”，文档在这里。它基于将一个面包屑附加到每个路由的handle对象上，并使用useMatches hook来检索它。

所以我重写了代码，但它有一个相当大的缺陷，我无法解决。假设我有3个路由，其中2和3是嵌套在1下面：

{
    path: '/',
    element: <Layout />,
    handle: {
      crumb: () => 'Home',
    },
    children: [
      {
        path: '/users',
        element: <UserList />,
        handle: {
          crumb: () => 'Users',
        },
      },
      {
        path: '/users/:id',
        element: <UserDetails />,
        handle: {
          crumb: () => <DynamicUserNameCrumb />,
        },
      },
   ]
}

使用自定义库，您可以转到/users/:id并获得每个路由的面包屑，使整个面包屑导航如下：

“主页 -> 用户 -> John Doe”

然而，使用新的内置方式和useMatches() hook时，我只能匹配到路由1和3。路由2（/users）不被视为匹配，并且我无法访问该路由的面包屑。结果是这样的，这不是我想要的：

“首页 -> John Doe”

所以我的问题是：您应该如何处理这种情况？将路由3嵌套在2下面是我的第一个想法，这样可以正确显示面包屑，但实际上它会渲染为路由2定义的组件（用户列表），而我只想渲染路由1（布局）和3（用户详情页）。

我希望useMatches()能够接受配置以返回部分匹配，但似乎这个hook不接受任何输入。

我快要回退并回到第三方库，但在这样做之前想在这里询问一下，因为他们明确推荐使用基于useMatches和handle对象的原生解决方案。我想如果这是官方推荐的处理react-router面包屑的方式，肯定会有解决方案。

Answer 1

从我所了解的情况来看，这是因为"/users"和"/users/:id"是兄弟路由。重构路由配置，使"/users/:id"成为"/users"的子路由，这样就有了一个“逻辑路径”，从"/"到"users"到":id"的各个段。

示例：

const router = createBrowserRouter([
  {
    path: "/",
    element: <Layout />,
    handle: {
      crumb: () => "Home"
    },
    children: [
      {
        path: "/users",
        handle: {
          crumb: () => "Users"
        },
        children: [
          {
            index: true,
            element: <UserList />
          },
          {
            path: "/users/:id",
            element: <UserDetails />,
            handle: {
              crumb: () => <DynamicUserNameCrumb />
            }
          }
        ]
      }
    ]
  }
]);