Implementing Breadcrumbs

[Roybie]

I want to add breadcrumbs to the top of each of my pages but I'm not sure if there is a way to do this not manually for each page.

I thought about having breadcrumbs included using withView and adding breadcrumb data using withContext but nested routes cannot update the parent context.

Is there someway I can add the data to routes and get it with the useCurrentRoute() hook? Using getData or something will just overwrite parent data with the same name.

[jamesknelson]

One possibility would be to add a “breadcrumbs” array to context near the top, and use withContext to concat new breadcrumbs onto the array as needed.

On Wed, Oct 2, 2019 at 12:20 Roy Brunton notifications@github.com wrote:

I want to add breadcrumbs to the top of each of my pages but I'm not sure if there is a way to do this not manually for each page.

I thought about having breadcrumbs included using withView and adding breadcrumb data using withContext but nested routes cannot update the parent context.

Is there someway I can add the data to routes and get it with the useCurrentRoute() hook? Using getData or something will just overwrite parent data with the same name.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/frontarm/navi/issues/142?email_source=notifications&email_token=AABHPK77T4A3YVIXXYOUCETQMQHRDA5CNFSM4I4RHVEKYY3PNVWWK3TUL52HS4DFUVEXG43VMWVGG33NNVSW45C7NFSM4HPAQDOA, or mute the thread https://github.com/notifications/unsubscribe-auth/AABHPK47TXOP32IUI2DGVYTQMQHRDANCNFSM4I4RHVEA .

[Roybie]

@jamesknelson Yeah I tried that, but I wanted to use withView near the top to render the breadcrumbs. If I pass the context as a prop at the top, any nested routes calling withContext won't be reflected in the context passed to the breadcrumbs view component.

If possible I'd like to avoid using withView to add the breadcrumbs in multiple places deeper in nested routes.

[jamesknelson]

The issue is that routes are designed to be independent of their parents, which makes it difficult to do something like this cleanly.

One possible hack would be to add an array to context, and mutate it with push in the route instead of using concat. This should work atm, because the full route is re-rendered each time anything changes -- although I must emphasize that this is a bit of a hack.

[Roybie]

That does indeed work. Hacky may have to suffice for now. Thanks!

[jamesknelson]

Great! Closing this for now.