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

0 replies

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: ***@***.***>

4 replies

DevlinRocha Jul 12, 2024

first class support would be fantastic! i hope it is for the entire <head> element and not just the <title>, this is very important for SEO, such as defining canonical URLs, keywords, etc. for each route. thanks for all your hard work!

moshOntong-IT Nov 16, 2024

What is the status?

Eigilak Nov 19, 2024

❤️

edproton Nov 27, 2024

Up

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.

3 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 🚀

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

3 replies

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to set html tag title from a route #1056

{{title}}

Replies: 13 comments 12 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

How to set html tag title from a route #1056

Replies: 13 comments · 12 replies

giacomorebonato Jan 22, 2024 Author

tannerlinsley Jan 24, 2024 Maintainer

giacomorebonato Mar 11, 2024 Author

Replies: 13 comments 12 replies

giacomorebonato
Jan 22, 2024
Author

tannerlinsley
Jan 24, 2024
Maintainer

giacomorebonato
Mar 11, 2024
Author