T
TanStack•13mo ago
fascinating-indigo

Unable to change the title dynamically per page

This is probably a stupid question, but I'm not sure how to dynamically change the <title> aspect of the main html file. Doing it like something below does work however it's a messy implementation. Any ideas? _root.tsx 
import * as React from 'react'
import {createRootRoute, Link, Outlet, ScrollRestoration, useRouterState} from '@tanstack/react-router'
import '../index.css'

export const Route = createRootRoute({
    component: RootComponent,
    notFoundComponent: () => {
        return <NotFoundComponent />
    },
})

function RootComponent() {
    return (
        <RootDocument>
            <Outlet />
        </RootDocument>
    )
}

function RootDocument({children}: { children: React.ReactNode }) {
    return (
        <Html>
            {children}
            <ScrollRestoration />
        </Html>
    )
}

function Html({children}: { children: React.ReactNode }) {
    const breadcrumbs = useRouterState({
        select: (state) => {
            return state.matches
                .map((match) => ({
                    title: match.meta?.find((tag) => tag.title)?.title,
                    path: match.pathname,
                }))
                .filter((crumb) => Boolean(crumb.title));
        },
    });

    const breadcrumb = breadcrumbs.at(0);

    return (
        <html lang="en">
        <head>
            <meta charSet="UTF-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
            <title>
                {breadcrumb?.title ? `${breadcrumb.title} - ` : 'GlassHost - Transparent, Reliable, Affordable Hosting'}
            </title>
        </head>
        <body>
            <div id="app" className="h-screen">{children}</div>
            <script type="module" src="/src/index.tsx"></script>
        </body>
        </html>
    )
}
import * as React from 'react'
import {createRootRoute, Link, Outlet, ScrollRestoration, useRouterState} from '@tanstack/react-router'
import '../index.css'

export const Route = createRootRoute({
    component: RootComponent,
    notFoundComponent: () => {
        return <NotFoundComponent />
    },
})

function RootComponent() {
    return (
        <RootDocument>
            <Outlet />
        </RootDocument>
    )
}

function RootDocument({children}: { children: React.ReactNode }) {
    return (
        <Html>
            {children}
            <ScrollRestoration />
        </Html>
    )
}

function Html({children}: { children: React.ReactNode }) {
    const breadcrumbs = useRouterState({
        select: (state) => {
            return state.matches
                .map((match) => ({
                    title: match.meta?.find((tag) => tag.title)?.title,
                    path: match.pathname,
                }))
                .filter((crumb) => Boolean(crumb.title));
        },
    });

    const breadcrumb = breadcrumbs.at(0);

    return (
        <html lang="en">
        <head>
            <meta charSet="UTF-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
            <title>
                {breadcrumb?.title ? `${breadcrumb.title} - ` : 'GlassHost - Transparent, Reliable, Affordable Hosting'}
            </title>
        </head>
        <body>
            <div id="app" className="h-screen">{children}</div>
            <script type="module" src="/src/index.tsx"></script>
        </body>
        </html>
    )
}
3 Replies
fascinating-indigo
fascinating-indigoOP•13mo ago
I could pass in a meta property tag, but I'm not sure how I can change the <title> tag using this method. index.tsx 
export const Route = createFileRoute('/')({
    component: HomeComponent,
    meta: () => [
        {
            title: "Profile",
        }
    ],
});
export const Route = createFileRoute('/')({
    component: HomeComponent,
    meta: () => [
        {
            title: "Profile",
        }
    ],
});
xenial-black
xenial-black•13mo ago
fascinating-indigo
fascinating-indigoOP•13mo ago
Thanks

Did you find this page helpful?