我正在使用react-router-dom v6.8.1（截至目前最新版本），之前使用一個名為use-react-router-breadcrumbs的第三方庫來設(shè)定麵包屑導(dǎo)航，但根據(jù)它的文檔，他們現(xiàn)在推薦使用“內(nèi)建的react-router方式”，文件在這裡。它基於將一個麵包屑附加到每個路由的handle物件上，並使用useMatches hook來檢索它。
所以我重寫了程式碼，但它有一個相當(dāng)大的缺陷，我無法解決。假設(shè)我有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並獲得每個路由的麵包屑，使整個麵包屑導(dǎo)航如下：
「首頁 -> 使用者 -> John Doe」
然而，使用新的內(nèi)建方式和useMatches() hook時，我只能匹配到路由1和3。路由2（/users）不被視為匹配，並且我無法訪問該路由的麵包屑。結(jié)果是這樣的，這不是我想要的：
「首頁 -> John Doe」
所以我的問題是：您應(yīng)該如何處理這種情況？將路由3嵌套在2下面是我的第一個想法，這樣可以正確顯示麵包屑，但實(shí)際上它會渲染為路由2定義的元件（用戶列表），而我只想渲染路由1（佈局）和3（用戶詳情頁）。
我希望useMatches()能夠接受配置以返回部分匹配，但似乎這個hook不接受任何輸入。
我快要回退並回到第三方函式庫，但在這樣做之前想在這裡詢問一下，因為他們明確推薦使用基於useMatches和handle物件的原生解決方案。我想如果這是官方推薦的處理react-router麵包屑的方式，肯定會有解決方案。
1
0
0
從我所了解的情況來看，這是因為"/users"和"/users/:id"是兄弟路由。重構(gòu)路由配置，使"/users/:id"成為"/users"的子路由，這樣就有了一個“邏輯路徑”，從"/ "到"users"到":id"的各段。
範(fàn)例：
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 />
}
}
]
}
]
}
]);
