我正在使用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面包屑的方式,肯定会有解决方案。
从我所了解的情况来看,这是因为
"/users"
和"/users/:id"
是兄弟路由。重构路由配置,使"/users/:id"
成为"/users"
的子路由,这样就有了一个“逻辑路径”,从"/"
到"users"
到":id"
的各个段。示例: