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 />
            }
          }
        ]
      }
    ]
  }
]);