atlassian-labs / react-resource-router

Configuration driven routing solution for React SPAs that managesĀ route matching, data fetching and progressive rendering
https://atlassian-labs.github.io/react-resource-router
Apache License 2.0
202 stars 28 forks source link

Breadcrumbs #168

Open anacierdem opened 2 years ago

anacierdem commented 2 years ago

react-router has a mechanism to allow creating breadcrumbs from the component tree. This is not something that is currently possible with RRR as there is no child route concept as of now.

The other potential solution is exposing an abstracted array of history entries so that we can use it to decide on the currently displayed breadcrumb. This is not ideal but is possible with some tinkering and a few limitations (like it is not possible to have same route twice in the breadcrumbs - which is not required in practice anyways).

Are there any plans on implementing such a mechanism?

albertogasparin commented 2 years ago

Given RRR does not have a "nesting" concept, not sure we will support it natively. However it is fairly easy to implement thanks to the freedom of the route configuration object. In there you can provide a key called "parentRoute" for instance, setting it with the name of the parent. Then, thanks to createRouterSelector API you should be able to create a useParentRoute hook that given current route (or a route) looks for the matching name of the parent in the router routes array and returns it.

For instance, in our product, we have created a similar, more generic, hook called useRouteByName(name) that leverages the flexibility of the hook selector creator too

anacierdem commented 2 years ago

Looks like a good idea. I didn't realize the configuration object was free-form šŸ‘

anacierdem commented 1 year ago

There is an annoyance;

The route state is declared as PublicStateProperties and it does not include the whole route list. The only way seems to cast it to EntireRouterState like (state as EntireRouterState).routes.

OTOH, this seems like it was intended to be an internal API so I am not sure if it is safe to assume routes is public? (Also note EntireRouterState is not exported so the only option is casting to any for now: (state as any).routes as Routes)