我正在使用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粉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 /> } } ] } ] } ]);