Breadcrumb-Navigation und partielles Match-Routing für React-Router v6

Question

Ich verwende „react-router-dom v6.8.1“ (die aktuellste Version) und habe zuvor eine Bibliothek eines Drittanbieters namens „use-react-router-breadcrumbs“ zum Einrichten von Breadcrumbs verwendet. Laut Dokumentation empfehlen sie jetzt „Use the“. „Eingebauter React-Router-Weg“, die Dokumentation finden Sie hier. Es basiert auf dem Anhängen eines Breadcrumbs an das Handle-Objekt jeder Route und der Verwendung des useMatches-Hooks zum Abrufen.

Also habe ich den Code umgeschrieben, aber er hat einen ziemlich großen Fehler, den ich nicht beheben kann. Nehmen wir an, ich habe 3 Routen, 2 und 3 sind unter 1 verschachtelt:

{
    path: '/',
    element: <Layout />,
    handle: {
      crumb: () => 'Home',
    },
    children: [
      {
        path: '/users',
        element: <UserList />,
        handle: {
          crumb: () => 'Users',
        },
      },
      {
        path: '/users/:id',
        element: <UserDetails />,
        handle: {
          crumb: () => <DynamicUserNameCrumb />,
        },
      },
   ]
}

Mit einer benutzerdefinierten Bibliothek können Sie zu /users/:id gehen und die Breadcrumbs für jede Route abrufen, sodass die gesamte Breadcrumb-Navigation so aussieht:

"Home -> Benutzer -> John Doe"

Wenn ich jedoch die neue integrierte Methode und den Hook useMatches() verwende, kann ich nur die Routen 1 und 3 abgleichen. Route 2 (/users) gilt nicht als Übereinstimmung und ich kann nicht auf die Breadcrumbs für diese Route zugreifen. Das Ergebnis ist das, was ich nicht will:

"Home -> John Doe"

Meine Frage lautet also: Wie sollten Sie mit dieser Situation umgehen? Mein erster Gedanke war, Route 3 unter 2 zu verschachteln, damit die Breadcrumbs korrekt angezeigt würden, aber in Wirklichkeit würde es als die durch Route 2 (Benutzerliste) definierte Komponente gerendert werden, während ich nur Route 1 (Layout) und 3 rendern wollte ( Benutzerdetailseite).

Ich habe erwartet, dass useMatches() eine Konfiguration akzeptiert, um Teilübereinstimmungen zurückzugeben, aber es scheint, dass dieser Hook keine Eingaben akzeptiert.

Ich bin gerade dabei, einen Rollback durchzuführen und zu einer Bibliothek eines Drittanbieters zurückzukehren, wollte aber vorher hier nachfragen, da dort eindeutig die Verwendung nativer Lösungen basierend auf useMatches und Handle-Objekten empfohlen wird. Ich denke, wenn dies die offiziell empfohlene Methode zum Umgang mit React-Router-Breadcrumbs ist, muss es eine Lösung geben.

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