Navigation dans le fil d'Ariane et routage de correspondance partielle pour React-router v6

Question

J'utilise réagir-router-dom v6.8.1 (dernière version à ce jour), j'utilisais auparavant une bibliothèque tierce appelée use-react-router-breadcrumbs pour configurer le fil d'Ariane, mais selon sa documentation, ils recommandent maintenant d'utiliser le "méthode de réaction-routeur intégrée", la documentation est ici. Il est basé sur l’attachement d’un fil d’Ariane à l’objet handle de chaque route et sur l’utilisation du hook useMatches pour le récupérer.

J'ai donc réécrit le code, mais il présente un gros défaut que je n'arrive pas à corriger. Disons que j'ai 3 itinéraires, 2 et 3 sont imbriqués sous 1 :

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

À l'aide d'une bibliothèque personnalisée, vous pouvez accéder à /users/:id et obtenir le fil d'Ariane pour chaque itinéraire, ce qui fait que l'ensemble du fil d'Ariane ressemble à ceci :

"Accueil -> Utilisateurs -> John Doe"

Cependant, lorsque j'utilise la nouvelle méthode intégrée et le hook useMatches(), je ne peux faire correspondre que les routes 1 et 3. La route 2 (/users) n'est pas considérée comme une correspondance et je ne peux pas accéder au fil d'Ariane pour cette route. Le résultat est le suivant, ce qui n'est pas ce que je souhaite :

"Accueil -> John Doe"

Ma question est donc la suivante : comment devez-vous gérer cette situation ? Ma première pensée a été d'imbriquer la route 3 en dessous de 2 afin que le fil d'Ariane s'affiche correctement, mais en réalité, il serait rendu comme le composant défini par la route 2 (liste d'utilisateurs) alors que je voulais seulement restituer la route 1 (mise en page) et 3 ( page de détails de l'utilisateur).

Je m'attendais à ce que useMatches() accepte une configuration pour renvoyer des correspondances partielles, mais il semble que ce hook n'accepte aucune entrée.

Je suis sur le point de revenir en arrière et de revenir à une bibliothèque tierce, mais je voulais demander ici avant de le faire, car ils recommandent clairement d'utiliser des solutions natives basées sur useMatches et de gérer des objets. Je suppose que si c'est la manière officiellement recommandée de gérer le fil d'Ariane du routeur React, il doit y avoir une solution.

Answer 1

D'après ce que j'ai compris, cela est dû aux différents segments de "/users"和"/users/:id"是兄弟路由。重构路由配置，使"/users/:id"成为"/users"的子路由，这样就有了一个“逻辑路径”，从"/"到"users"到":id".

Exemple :

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