complex-teal

How to change page title per route?

Back in the day we used to use React-Helmet. That seems to be unmaintained now for a while. I found this page but it doesn't explain how I can dynamically change the page title based on values on the page: https://tanstack.com/router/latest/docs/framework/react/guide/document-head-management Anyone done this before?

Document Head Management | TanStack Router React Docs

Document head management is the process of managing the head, title, meta, link, and script tags of a document and TanStack Router provides a robust way to manage the document head for full-stack appl...

8 Replies

complex-tealOP•7mo ago

Example code:

export const Route = createFileRoute("/cool-thing")({
  onEnter: () => {
    // set title here based on URL
  },
  component: () => {
     const thing = useZustandStore(state => state.thing)
     return ( 
       <Title>{thing}</Title>
     )
 }

export const Route = createFileRoute("/cool-thing")({
  onEnter: () => {
    // set title here based on URL
  },
  component: () => {
     const thing = useZustandStore(state => state.thing)
     return ( 
       <Title>{thing}</Title>
     )
 }

dependent-tan•7mo ago

Hi I am interested on your post. thanks. I can help you.

extended-salmon•7mo ago

the only way i have found is through a useEffect

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

export const Route = createFileRoute("/about/$postId")(
  {
    component: RouteComponent,
  },
);

function RouteComponent() {
  const { postId }: number = useParams({ strict: false });

  useEffect(() => {
    document.title = `Post ${postId}`; // Set the dynamic title
  }, [postId]);

  return <div>Hello {postId}</div>;
}

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

export const Route = createFileRoute("/about/$postId")(
  {
    component: RouteComponent,
  },
);

function RouteComponent() {
  const { postId }: number = useParams({ strict: false });

  useEffect(() => {
    document.title = `Post ${postId}`; // Set the dynamic title
  }, [postId]);

  return <div>Hello {postId}</div>;
}

this is with out a database connected, I am going to try using it through a loader

fair-rose•7mo ago

Hello! If you use react 19 You can just render a <title>{yourLoaderSata}</title>

fascinating-indigo•7mo ago

with HeadContent this is how you do it https://github.com/TanStack/router/blob/main/e2e/react-router/basic-file-based/src/routes/posts.tsx#L9

GitHub

router/e2e/react-router/basic-file-based/src/routes/posts.tsx at ma...

🤖 Fully typesafe Router for React (and friends) w/ built-in caching, 1st class search-param APIs, client-side cache integration and isomorphic rendering. - TanStack/router

complex-tealOP•7mo ago

omg amazing, using this! Thanks

correct-apricot•6mo ago

I guess this is working but there is some delay. Did you manage to fix that to be instant?

fascinating-indigo•6mo ago

are you on react 19? if yes, use HeadContent

Gaming

Programming

How to change page title per route?

Did you find this page helpful?