Question: How to treat unmatched route in the breadcrumbs

[gomesp]

Hi there 👋

Thanks for making this cool library. I have the following routes which are causing a 404 (unmatched route) to be displayed in the breadcrumbs (I create the routes from the array).

When I navigate to e.g. /admin/rates/123/view (or /edit, /delete), it shows me this in the breadcrumbs: "Home / Current rates / 404 / View Rate". This is because the route /admin/rates/:id is not declared.

Do you have any suggestion to prevent this please?

Thanks!

      {
        path: "/admin/rates",
        breadcrumb: "Current rates",
        element: React.lazy(() => import("pages/admin/rates/Rates.List")),
      },
      {
        path: "/admin/rates/create",
        breadcrumb: "New Rate",
        element: React.lazy(() => import("pages/admin/rates/Rates.Create")),
      },
      {
        path: "/admin/rates/:id/view",
        breadcrumb: "View Rate",
        element: React.lazy(() => import("pages/admin/rates/Rate.View")),
      },
      {
        path: "/admin/rates/:id/edit",
        breadcrumb: "Edit Rate",
        element: React.lazy(() => import("pages/admin/rates/Rate.Edit")),
      },
      {
        path: "/admin/rates/:id/delete",
        breadcrumb: "Delete Rate",
        element: React.lazy(() => import("pages/admin/rates/Rate.Delete")),
      },

edit: my current workaround is to use the excludePaths option, but as the app grows the number of paths excluded is going to grow as well. I'd love to see an option to automatically skip an unmatched route in the path if possible please.

[icd2k3]

hi @gomesp !

my current workaround is to use the excludePaths option, but as the app grows the number of paths excluded is going to grow as well.

excludePaths: '/admin/rates/:id' should cover all of those (view, edit, delete, etc)... you might be able to utilize disableDefaults: true to disable ALL default breadcrumb generation?

[gomesp]

Thanks for responding so quickly @icd2k3.

I have tried adding your suggestion (with and without the excludePaths attribute) and it did not change the behaviour.

Just to be a bit clearer with my original question, I am going to add a number of entities to the app, and all are going to have a similar route (e.g. /admin/<entity_name>/:id/<view/edit/delete>).

Currently I am working on the first entity, so that array is just a single entry. I was hoping it was possible to exclude everything that followed the same pattern (e.g. excludePaths: ["/admin/*/:id"]). I'll try and create a simple test app to show you what I am doing.

  const options = { excludePaths: ["/admin/rates/:id"], disableDefaults: true };
  const breadcrumbs = useBreadcrumbs(RoutesList, options);

[gomesp]

Hi @icd2k3, I have created this test project to illustrate the issue: https://github.com/gomesp/test-breadcrumbs

The test page to reproduce my question is under http://localhost:3000/rates/1/view.

Thanks again!

[icd2k3]

thanks @gomesp - if I understand correctly, I think you can accomplish what you want by just passing null for the breadcrumb prop which will tell the hook not to render breadcrumbs for any unmatched route

const InvalidPages = [
  {
    path: "*",
    breadcrumb: null,
    element: React.lazy(() => import("pages/public/NotFound")),
  },
];

[icd2k3]

Closing thread, but feel free to reply if you're still have questions!

[gomesp]

Thanks for the suggestion @icd2k3