I am trying to make a dynamic breadcrumb component with custom values in Nextjs 13.
Let’s say I have the route: /dashboard/[tenant]/[invoice]/editor/abcd
.
Currently, I do an API call and populate [tenant]
and [invoice]
with custom names in my Breadcrumb component
; E.g the name of the tenant and document instead of the id’s.
Now I would like to render a link for [invoice]
and ‘editor’ and ‘abcd’ which are all pages, except for [tenant]
.
How can I distinct between a slug that is a page and a slug that isn’t a page?
I know for example that ‘abcd’ is a page because it is the end of the url. But I would not know that for ‘editor’.
I tried using the useParams
hook but that only returns the values in the URL of course.