How to set html tag title from a route #1056

giacomorebonato · 2024-01-22T10:46:58Z

giacomorebonato
Jan 22, 2024

I can't see this from the examples, I am looking for a way to set HTML page title from a route definition.

<!DOCTYPE html>
<html>
<head>
  <title><!-- this title --></title>
</head>
<body>

This is challenging because the <head /> element is defined in the root component __root.tsx and other routes don't have access to it.
At the moment I am relying on rendering an hidden HTML element that I copy to the page head, before sending the code to the browser.

Which works well, until I want to find a way to apply the streaming technique and then I am lost!

giacomorebonato · 2024-01-22T11:40:54Z

giacomorebonato
Jan 22, 2024
Author

Another option that I am considering is to extract the __root.tsx component into a re-usable one, where I can pass the title as prop.

0 replies

dohomi · 2024-01-24T01:35:55Z

dohomi
Jan 24, 2024

Following this diccussion, I've seen https://tanstack.com/router/v1/docs/guide/router-context#processing-accumulated-route-context but not sure how to adjust Vite config to be able to have the <head/> section inside of __root.tsx

1 reply

thinhbg2812 Jan 24, 2025

Link is dead boss

tannerlinsley · 2024-01-24T03:28:54Z

tannerlinsley
Jan 24, 2024
Maintainer

I’m working on a first class solution for title tags.

…

On Jan 23, 2024 at 6:36 PM -0700, Dominic Garms ***@***.***>, wrote: Following this diccussion, I've seen https://tanstack.com/router/v1/docs/guide/router-context#processing-accumulated-route-context but not sure how to adjust Vite config to be able to have the <head/> section inside of __root.tsx — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

8 replies

whysocket Nov 27, 2024

Up

thinhbg2812 Jan 24, 2025

up

ilarramendi Jan 28, 2025

Up

nicoandreoli2000 Feb 25, 2025

Updates?

BrendanC23 Feb 25, 2025

This has been implemented. Here are the docs. Also, see the new posts at the bottom of this discussion.

benweier · 2024-01-24T08:14:28Z

benweier
Jan 24, 2024

I'd be keen for a first-class solution too. I had to adapt this solution from my previous React Router version...

For the moment I have a Meta component that gets all the matched routes which have a meta function on the route context from beforeload, and rendered as high up in my route tree as possible

The meta function accepts a t function from i18next as well as the loader data so that I can use translations and dynamic data in the meta tags if needed. I didn't want to enforce the t usage inside Meta, opting to pass it as an argument instead, and awaiting deferred data in meta turned out to be a terrible experience so I simply enforce that any route data used by the meta functions must never be deferred.

It's not perfect and there's actually no type-safety between my route data and the meta data argument, but it does the job pretty well - I just have to be very mindful of the loader data and manually provide the types to meta when required. A cool pattern I've used in another project is being able to render Meta components further down the route tree to effectively "override" the top level Meta if, for example, it needed a different titleTemplate pattern.

0 replies

matclayton · 2024-03-07T14:10:10Z

matclayton
Mar 7, 2024

@tannerlinsley any update when a first class solution might land, we're evaluating swapping to TanStack Router and this is one of the core pieces we're considering, especially when combined with Streaming responses. I noted the code/examples cover the Meta data, (except I couldn't find an example which loads in data for the tags), and wondered if this was the final API, or if it was a matter of just adding docs?

0 replies

shakibhasan09 · 2024-03-09T21:44:00Z

shakibhasan09
Mar 9, 2024

@tannerlinsley thanks for the wonderful library, looking forward to use the title tag feature in TanStack Router

0 replies

mutewinter · 2024-03-10T17:52:57Z

mutewinter
Mar 10, 2024

For now, here's an example using accumulated route context:

interface RootContext {
  getTitle?: () => string | Promise<string>;
}

function Root() {
  const matches = useMatches();

  useEffect(() => {
    // Set document title based on lowest matching route with a title
    const breadcrumbPromises = [...matches]
      .reverse()
      .map((match, index) => {
        if (!('getTitle' in match.routeContext)) {
          if (index === 0 && import.meta.env.DEV) {
            // eslint-disable-next-line no-console
            console.warn('no getTitle', match.pathname, match);
          }
          return undefined;
        }
        const { routeContext } = match;
        return routeContext.getTitle();
      })
      .filter(Boolean);
    void Promise.all(breadcrumbPromises).then((titles) => {
      document.title = titles.join(' · ');
      return titles;
    });
  }, [matches]);

  return <Outlet />;
}

export const Route = createRootRouteWithContext<RootContext>()({
  beforeLoad: () => ({ getTitle: () => 'App Name' }),
  component: Root,
});

// In another route file:

export const Route = createFileRoute('/test/')({
  beforeLoad: () => ({ getTitle: () => 'Test' }),
  component: () => <Test />,
});

This results in title like:

/: App Name
/test/: Test · App Name

And supports further nesting.

4 replies

barrenechea May 13, 2024

I wonder how to make it work with LazyFileRoute

bruceharrison1984 May 16, 2024

@barrenechea See this issue for how to make this work with Lazy routes. I just ran a quick POC and it works.

#1209 (comment)

barrenechea May 20, 2024

That was it! Thank you very much @bruceharrison1984 🚀

thinhbg2812 Jan 24, 2025

It's work for me :(
in my case it's nested routed

no getTitle /order/

giacomorebonato · 2024-03-11T07:24:01Z

giacomorebonato
Mar 11, 2024
Author

I am now relying on react-helmet-async for head markup in my fastrat React + Fastify starter kit.
I will update it if in the future there will be cleaner option, but I don't miss anything at the moment.

0 replies

Rendez · 2024-08-08T12:38:27Z

Rendez
Aug 8, 2024

I've opted for a much simpler solution relying on the meta property, so it's future-proof:

const TITLE = 'Your Company';

export const Route = createRootRouteWithContext<RootRouteContext>()({
  meta: () => [
    {
      title: TITLE,
    },
  ],
  component: RootComponent,
});

function Meta({ children }: { children: ReactNode }) {
  const matches = useMatches();
  const meta = matches.at(-1)?.meta?.find((meta) => meta.title);

  useEffect(() => {
    document.title = [meta?.title, TITLE].filter(Boolean).join(' · ');
  }, [meta]);

  return children;
}

function RootComponent() {
  return (
    <Meta>
      <Outlet />
    </Meta>
  );
}

0 replies

bruceharrison1984 · 2024-08-20T14:30:01Z

bruceharrison1984
Aug 20, 2024

To build on @Rendez solution, I wrote a simple hook that gathers up all the titles, and exposes them via prop. You can easily combine this with the Meta resource in Rendez's answer to nicely split apart all the logic from breadcrumbs.

import { useMatches } from "@tanstack/react-router";
import {
  createContext,
  PropsWithChildren,
  useContext,
  useEffect,
  useState,
} from "react";

const BreadcrumbContext = createContext<
  | {
      breadcrumbs: string[];
      getBreadcrumbString: (separator?: string) => string;
    }
  | undefined
>(undefined);

export const BreadcrumbProvider = ({ children }: PropsWithChildren) => {
  const [breadcrumbs, setBreadcrumbs] = useState<string[]>([]);

  const matches = useMatches();

  useEffect(() => {
    const meta = matches
      .map((x) => x.meta?.find((meta) => meta.title)?.title)
      .filter((x) => x !== undefined);
    setBreadcrumbs(meta);
  }, [matches]);

  const getBreadcrumbString = (separator = " > ") => {
    if (!breadcrumbs) return "";
    return breadcrumbs?.join(separator);
  };

  return (
    <BreadcrumbContext.Provider value={{ breadcrumbs, getBreadcrumbString }}>
      {children}
    </BreadcrumbContext.Provider>
  );
};

export const useBreadcrumbs = () => {
  const breadcrumbs = useContext(BreadcrumbContext);
  if (!breadcrumbs)
    throw new Error("useBreadcrumbs must be used within BreadcrumbProvider");
  return breadcrumbs;
};

/// access breadcrumb data from any where via
/// const { breadcrumbs, getBreadcrumbString } = useBreadcrumbs();

Adjust your root module to be similar to the following:

function RootComponent() {
  return (
      <BreadcrumbProvider>
        <Meta>
          <Outlet />
        </Meta>
      </BreadcrumbProvider>
  );
}

0 replies

gnllucena · 2024-09-22T03:42:26Z

gnllucena
Sep 22, 2024

hey @tannerlinsley , I’ve seen the meta function in some examples in the tanstack/router repo:

import { createFileRoute } from "@tanstack/react-router";

export const Route = createFileRoute("/(identity)/sign-up")({
  meta: () => [
    {
      title: "New title",
    },
    {
      charSet: "UTF-8",
    },
    {
      name: "viewport",
      content: "width=device-width, initial-scale=1.0",
    },
  ],
});

but I don't see my page title changing... is this API still experimental?

2 replies

chrism1996 Sep 26, 2024

hey @tannerlinsley , I’ve seen the meta function in some examples in the tanstack/router repo:
import { createFileRoute } from "@tanstack/react-router";

export const Route = createFileRoute("/(identity)/sign-up")({
  meta: () => [
    {
      title: "New title",
    },
    {
      charSet: "UTF-8",
    },
    {
      name: "viewport",
      content: "width=device-width, initial-scale=1.0",
    },
  ],
});
but I don't see my page title changing... is this API still experimental?

Same. Trying to build a reusable Seo component to update title, description etc. I have seen the meta property in createFileRoute but i dont see it in the docs, is that experimental @tannerlinsley ?

vKongv Sep 30, 2024

Seen that too, seems to be under "start" documentation based on the URL. Doesn't work in router yet.

fitimbytyqi · 2024-10-11T16:51:08Z

fitimbytyqi
Oct 11, 2024

Has this been fixed ?

I just tried setting a meta attribute inside createFileRoute and it seemd to work!

export const Route = createFileRoute("/")({
  component: Home,
  loader: async () => await getCount(),
  meta: () => [
    {
      title: "This is working!",
    },
  ],
});

4 replies

nemeseri Oct 25, 2024

Can you give me some information on the version you use? It's still not working for me.

BrendanC23 Oct 28, 2024

I think you need to be using TanStack Start for the meta option to work out of the box. If you're just using the router, it needs a bit more code. See this discussion.

fitimbytyqi Oct 28, 2024

@nemeseri I am sorry, as mentioned, my example comes from Start.

thinhbg2812 Jan 24, 2025

i dont see any option for meta in tanRouter thou

nanaaikinson · 2024-10-20T04:13:48Z

nanaaikinson
Oct 20, 2024

This is what I currently use and works well. You can add more features to it.

import { useEffect } from "react";

interface HelmetProps {
  title?: string;
  description?: string;
  keywords?: string;
}

const Helmet: React.FC<HelmetProps> = ({ title, description, keywords }) => {
  useEffect(() => {
    // Set document title if provided
    if (title) {
      document.title = title;
    }

    // Set meta description if provided
    if (description) {
      let metaDescription = document.querySelector('meta[name="description"]');

      if (!metaDescription) {
        metaDescription = document.createElement("meta");

        (metaDescription as HTMLMetaElement).name = "description";

        document.head.appendChild(metaDescription);
      }
      (metaDescription as HTMLMetaElement).content = description;
    }

    // Set meta keywords if provided
    if (keywords) {
      let metaKeywords = document.querySelector('meta[name="keywords"]');

      if (!metaKeywords) {
        metaKeywords = document.createElement("meta");

        (metaKeywords as HTMLMetaElement).name = "keywords";

        document.head.appendChild(metaKeywords);
      }
      (metaKeywords as HTMLMetaElement).content = keywords;
    }
  }, [title, description, keywords]);

  return null; // This component does not render any visible UI
};

export { Helmet };

0 replies

BrendanC23 · 2025-02-20T21:08:46Z

BrendanC23
Feb 20, 2025

The docs are slightly outdated currently, but they describe a new way to set the title tag (that works with or without Start). They currently suggest doing

export const Route = createRootRoute()({
  head: () => ({
    title: 'My App',
})

but the actual syntax is

export const Route = createRootRoute()({
    head: (ctx) => {
        return {
            meta: [
                {
                    title: "My App",
                },
            ],
        };
    },
})

You also need to render a <HeadContent /> tag. If you are using TanStack Start, this goes inside <head>. If not, it should just go before <Outlet>. Note that for the latter, I also had to get rid of <title> tag within my <head> in index.html. Otherwise, that was used instead of the route's title.

2 replies

dohomi Feb 21, 2025

I am using it with the router and this is the output of my HTML based on follwoing __root.tsx. Shouldnt the content be part of <head> instead of <body>?

abrahimzaman360 Feb 21, 2025

Look at my answer below:

abrahimzaman360 · 2025-02-21T06:59:18Z

abrahimzaman360
Feb 21, 2025

The way I have done suggested by @BrendanC23:

task:
Remove <title> tag from Index.html

• Do it once, In the Root Route file:

export const Route = createRootRoute({
  component: () => (
    <>
      <HeadContent />
      <RootComponent />
    </>
  ),
  head: () => ({
    meta: [
      {
        title: "My App",
      },
      { name: "description", content: "Learn more about MyApp" },
    ],
  }),
});

then,
• In File Route or Virtual Route:

import { createFileRoute } from "@tanstack/react-router";

export const Route = createFileRoute("/")({
  component: HomeComponent,
  head: (ctx) => {
    return {
      meta: [
        {
          title: "Index Page",
        },
        {
          name: "description",
          content: "Super Content",
        },
      ],
    };
  },
});

function HomeComponent() {
  return <h1>Hello Index</h1>;
}

0 replies

alexy4744 · 2025-02-24T23:06:34Z

alexy4744
Feb 24, 2025

For SPAs, you can render the <HeadContent /> inside the <head> of the document by using a portal, so that it isn't rendered inside of your <body>:

import { createPortal } from "react-dom";

export const Route = createRootRoute({
  component: () => (
    <>
      {createPortal(<HeadContent />, document.querySelector("head")!)}

      <Outlet />
    </>
  ),
  head: () => ({
    meta: [
      { title: "My App" },
      { name: "description", content: "Learn more about MyApp" },
    ],
  }),
});

8 replies

maxime-forveille Feb 25, 2025

The benefit would be to take advantage of the dedup.
Right now, either you don't put the title inside the index.html but you will have those default route path titles or you put the title inside the <body> in your index.html and use the portal to allow us to override it inside routes.

Example of the lack of a title in the index.html, we should only see Admin App then Liste des organisations:

title-flicker.mp4

tannerlinsley Feb 25, 2025
Maintainer

When would you not have the flicker though (even if it’s empty, you’ll see a flicker from nothing or the default title)? It’s too late in the document lifecycle no matter how you slice it. Not sure what else could be done here other than full document control + SSR

maxime-forveille Feb 25, 2025

I was assuming that if my index.html has a defaut title in the head tag and I set the same at the index route, there will be no flicker.

cfmano Mar 5, 2025

The problem with this approach is that if you only use portal for SPAs, the HeadContent component doesn't update existing title (and other head related elements), but only adds them into head. If you need default title (inside e.g. index.html), this approach will never work. You either need to remove original <title> manually or fully replace <head> with <HeadContent />. Neither of them is comfortable.

maxime-forveille Mar 5, 2025

I understand that you don't want to parse the index.html in SPA mode. But the documentation could state it in a clearer way.
First I was expecting a behavior like react-helmet-async where I can put a title inside my index.html and then overwrite it in components.

How to set html tag title from a route #1056

Replies: 16 comments · 29 replies

giacomorebonato Jan 22, 2024 Author

tannerlinsley Jan 24, 2024 Maintainer

giacomorebonato Mar 11, 2024 Author

tannerlinsley Feb 25, 2025 Maintainer

Replies: 16 comments 29 replies

giacomorebonato
Jan 22, 2024
Author

tannerlinsley
Jan 24, 2024
Maintainer

giacomorebonato
Mar 11, 2024
Author

tannerlinsley Feb 25, 2025
Maintainer