Route labels

[juiceo]

Hey! Haven't explored this library very intimately yet, but there's something that I've been looking for in a routing library for a long time, and haven't yet come across a good solution for it.

Route labels

What is this? Put simply, the ability to give your routes human-readable labels, and manage those in one place (the route definition).

Something like:

const productRoute = new Route({
  getParentRoute: () => rootRoute,
  getLabel: () => "Products",
  path: '/products',
  component: Products,
});

The main use-cases that we would need this for would be to:

a) Display the label of the previous page

For example, I could have a use-case where on each nested page I want to display a navigational element that takes the user back to the page they came from - or perhaps breadcrumbs with multiple different pages. Currently to achieve this in react-router for example, one needs to pass in the name of the previous page(s) in the state when navigating between pages, and it quickly becomes quite hairy. In an ideal world, the router would know what was the previous page in the stack, would allow me to get the definition for the corresponding route, which I could then easily display in my custom back button or breadcrumbs.

b) Display the label of a page behind a link

The other use-case is if for example I have a page in my application, which I link to in 10 different places in my app. If I update the name of that page, I now need to go through all of these links and potentially update the labels to match. It would be super nice if I could similarly have the labels of those links use the route label I have defined, so that whenever I change the route label, everything just gets updated automatically.

So - question is: is this something that can already be achieved nicely with tanstack router? If not, is this a feature we could consider adding?

[DZetko]

I would also like to know more. I was able to find a guide to implement breadcrumbs in past issues #114 and #132 using the meta property on the Route type, but this implementation seems to be outdated or just simply not working these days.