React-router v6的面包屑导航和部分匹配路由
P粉520545753
P粉520545753 2024-01-10 16:48:48
0
1
460

我正在使用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面包屑的方式,肯定会有解决方案。

P粉520545753
P粉520545753

全部回复(1)
P粉113938880

从我所了解的情况来看,这是因为"/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 />
            }
          }
        ]
      }
    ]
  }
]);

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板