Modifying the Router Context with data from loader

[nilshartmann]

Hi all,

is it somehow possible to add information to a Router Context from data fetched in a loader ?

For example to build a breadcrumb trail from the contexts (as in the example), it would be helpful to have informations from the fetched data. It could be useful to use the title of a blog post that was received in the loader, so that the title of the post can be added to the breadcrumb trail).

Thanks,
Nils

[CHE1RON]

I'd be interested in this, too (for context, see #901 (comment)). Coming from react-router where I passed loader data to the handle prop.

[nilshartmann]

I think in practice the problem might get a little bit more complex. Not sure, if I'm wrong here with my route design, but consider this example:

const blogRoute = new Route({ path: `blog`, getParentRoute: () => rootRoute }); // maybe serves as a common layout (for the following routes) only
const blogPageRoute = new Route({ path: `$blogId`, getParantRoute: () => blogRoute }) 
const blogCommentsRoute = new Route({ path: `$blogId/comments`, getParantRoute: () => blogRoute }) 

Now, if a user would visit /blog/$blogId/comments, the loader functions for blog and blogComments would be executed and could (if that will be possible) add something to the (breadcrumb) context. But blogPageRoute loader would not be executed and the information from that loader (for example blog title) would be missing, so the breadcrumb would be Blog -> Comments and not Blog -> My Article -> Comments.

[ColonelThirtyTwo]

https://tanstack.com/router/latest/docs/framework/react/guide/router-context mentions using the route contexts for the page title, but since you apparently can't alter the context from the loader, if the title comes from the loaded data, you won't be able to use a route context for it. Seems like a pretty big oversight for that use case.

[tannerlinsley]

There is now a dedicated “meta” function on route options that receives the loader data result and can return an array of meta and or a title tag. It’s undocumented, but you can try it out today. Look at TanStack.com’s implementation for now while I solidify the docs.

[hosmelq]

This works like a charm.

Is it a good idea to use this to generate breadcrumbs?

[ericwang401]

If you're trying to use the meta function on a SPA, check out this code https://github.com/TanStack/router/blob/main/packages/react-router-server/src/client/Meta.tsx

to understand how to properly implement meta in SPA because it's works automatically for SSR. Things like title won't automatically set in an SPA so you'll have to handle it yourself.

[ericwang401]

This is what I'm doing to generate breadcrumbs

const breadcrumbs = useRouterState({
        select: state => {
            return state.matches
                .map(match => ({
                    title: match.meta?.find(tag => tag.title)!.title as string,
                    path: match.pathname,
                }))
                .filter(crumb => Boolean(crumb.title))
        },
    })

[Salam81]

This is what I'm doing to generate breadcrumbs

const breadcrumbs = useRouterState({
        select: state => {
            return state.matches
                .map(match => ({
                    title: match.meta?.find(tag => tag.title)!.title as string,
                    path: match.pathname,
                }))
                .filter(crumb => Boolean(crumb.title))
        },
    })

@ericwang401's code works to get the titles of the routes, but for anyone wondering, this is how you SET the title of a route.

export  const  Route  =  createFileRoute("/_authenticated/profile")({
  component: () =>  <Profile  />,
  meta: () => [
    {
      title:  "Profile",
    },
  ],
});