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.

[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",
    },
  ],
});

[nilshartmann]

For my app, I need some (async) data loaded in the loader functions, so I tried another approach, using a modified approach based on the Breadcrumbs component used in the kitchen-sink example, as I think head/meta cannot return a Promise?

The example below only uses the "deepest" pageTitle from a Route's loaderData, but I think it would be possible to also use it to build a "complete" breadcrumb.

import { isMatch, useRouterState } from "@tanstack/react-router";
import { use, Suspense } from "react";

type PageTitleProps = {
  defaultTitle: string;
};
function PageTitle({ defaultTitle }: PageTitleProps) {
  const pageTitle = useRouterState({
    select: (state) =>
      state.matches
        .filter((m) => isMatch(m, "loaderData.pageTitle"))
        .map((m) => m.loaderData?.pageTitle)
        .pop() || defaultTitle,
  });

  return (
    <Suspense fallback={defaultTitle}>
      {pageTitle instanceof Promise ? use(pageTitle) : pageTitle}
    </Suspense>
  );
}

In your component you can use the PageTitle component to show the Page Title where you need it to. I'm using it inside the __root-Route:

function RootRoute() {
  return (
    <div>
      <h1><PageTitle defaultTitle="My App" /></h1>
      <Outlet />
    </div>
  );
}

A Routes loader can set the pageTitle either to a string or Promise<string>, that should resolve to the page title.

Examples:

export const Route = createFileRoute("/about/")({
  // "static" page title
  loader: () => ({ pageTitle: "About us" }),
  // ...
});

export const Route = createFileRoute("/blog/$postId/")({
  // "dynamic" page title with title from route's data
  loader({ context, params }) {
    const postPromise = context.queryClient.ensureQueryData(
      postQueryOptions(params.postId),
    );
    return { pageTitle: postPromise.then((p) => p.title) };
  },
  // ...
});