文档头部管理

文档头部管理是管理文档的 head、title、meta、link 和 script 标签的过程，TanStack Router 提供了一种强大的方式来管理使用 Start 的全栈应用程序和使用 @tanstack/react-router 的单页应用程序的文档头部。它提供：

title 和 meta 标签的自动去重
根据路由可见性自动加载/卸载标签
一种可组合的方式来合并来自嵌套路由的 title 和 meta 标签

对于使用 Start 的全栈应用程序，甚至对于使用 @tanstack/react-router 的单页应用程序，管理文档头部是任何应用程序的关键部分，原因如下：

SEO
社交媒体分享
分析
CSS 和 JS 加载/卸载

要管理文档头部，您需要渲染 <HeadContent /> 和 <Scripts /> 组件，并使用 routeOptions.head 属性来管理路由的头部，该属性返回一个包含 title、meta、links、styles 和 scripts 属性的对象。

管理文档头部

tsx

export const Route = createRootRoute({
  head: () => ({
    meta: [
      {
        name: 'description',
        content: 'My App is a web application',
      },
      {
        title: 'My App',
      },
    ],
    links: [
      {
        rel: 'icon',
        href: '/favicon.ico',
      },
    ],
    styles: [
      {
        media: 'all and (max-width: 500px)',
        children: `p {
                  color: blue;
                  background-color: yellow;
                }`,
      },
    ],
    scripts: [
      {
        src: 'https://#/analytics.js',
      },
    ],
  }),
})

export const Route = createRootRoute({
  head: () => ({
    meta: [
      {
        name: 'description',
        content: 'My App is a web application',
      },
      {
        title: 'My App',
      },
    ],
    links: [
      {
        rel: 'icon',
        href: '/favicon.ico',
      },
    ],
    styles: [
      {
        media: 'all and (max-width: 500px)',
        children: `p {
                  color: blue;
                  background-color: yellow;
                }`,
      },
    ],
    scripts: [
      {
        src: 'https://#/analytics.js',
      },
    ],
  }),
})

去重

开箱即用，TanStack Router 将对 title 和 meta 标签进行去重，优先选择嵌套路由中找到的每个标签的**最后**出现。

嵌套路由中定义的 title 标签将覆盖父路由中定义的 title 标签（但您可以将它们组合在一起，这将在本指南的未来部分介绍）
具有相同 name 或 property 的 meta 标签将被嵌套路由中找到的该标签的最后一次出现覆盖

<HeadContent />

<HeadContent /> 组件是渲染文档的 head、title、meta、link 和头部相关 script 标签的**必需**组件。

如果您的应用程序不管理或无法管理 <head> 标签，它**应该渲染在您的根布局的 <head> 标签中，或者尽可能地渲染在组件树的顶部**。

启动/全栈应用

tsx

import { HeadContent } from '@tanstack/react-router'

export const Route = createRootRoute({
  component: () => (
    <html>
      <head>
        <HeadContent />
      </head>
      <body>
        <Outlet />
      </body>
    </html>
  ),
})

import { HeadContent } from '@tanstack/react-router'

export const Route = createRootRoute({
  component: () => (
    <html>
      <head>
        <HeadContent />
      </head>
      <body>
        <Outlet />
      </body>
    </html>
  ),
})

单页应用

首先，如果您设置了任何 <title> 标签，请将其从 index.html 中删除。

tsx

import { HeadContent } from '@tanstack/react-router'

const rootRoute = createRootRoute({
  component: () => (
    <>
      <HeadContent />
      <Outlet />
    </>
  ),
})

import { HeadContent } from '@tanstack/react-router'

const rootRoute = createRootRoute({
  component: () => (
    <>
      <HeadContent />
      <Outlet />
    </>
  ),
})

管理 Body 脚本

除了可以在 <head> 标签中渲染的脚本之外，您还可以使用 routeOptions.scripts 属性在 <body> 标签中渲染脚本。这对于加载需要 DOM 加载的脚本（甚至是内联脚本）非常有用，但在应用程序的主入口点之前（如果您使用 Start 或 TanStack Router 的全栈实现，则包括水合）。

要做到这一点，您必须：

使用 routeOptions 对象的 scripts 属性
渲染 <Scripts /> 组件

tsx

export const Route = createRootRoute({
  scripts: () => [
    {
      children: 'console.log("Hello, world!")',
    },
  ],
})

export const Route = createRootRoute({
  scripts: () => [
    {
      children: 'console.log("Hello, world!")',
    },
  ],
})

<Scripts />

<Scripts /> 组件是渲染文档 body 脚本的**必需**组件。如果您的应用程序不管理或无法管理 <body> 标签，它应该渲染在您的根布局的 <body> 标签中，或者尽可能地渲染在组件树的顶部。

示例

tsx

import { createFileRoute, Scripts } from '@tanstack/react-router'
export const Router = createFileRoute('/')({
  component: () => (
    <html>
      <head />
      <body>
        <Outlet />
        <Scripts />
      </body>
    </html>
  ),
})

import { createFileRoute, Scripts } from '@tanstack/react-router'
export const Router = createFileRoute('/')({
  component: () => (
    <html>
      <head />
      <body>
        <Outlet />
        <Scripts />
      </body>
    </html>
  ),
})

tsx

import { Scripts, createRootRoute } from '@tanstack/react-router'

export const Route = createRootRoute({
  component: () => (
    <>
      <Outlet />
      <Scripts />
    </>
  ),
})

import { Scripts, createRootRoute } from '@tanstack/react-router'

export const Route = createRootRoute({
  component: () => (
    <>
      <Outlet />
      <Scripts />
    </>
  ),
})