搜尋

首頁  >  問答  >  主體

React-router v6的麵包屑導航和部分匹配路由

我正在使用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粉520545753P粉520545753319 天前468

全部回覆(1)我來回復

  • P粉113938880

    P粉1139388802024-01-11 11:17:49

    從我所了解的情況來看,這是因為"/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 />
                }
              }
            ]
          }
        ]
      }
    ]);

    回覆
    0
  • 取消回覆