文档头部管理

文档头部管理

文档头部管理是管理文档的 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 和 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',
      },
    ],
    scripts: [
      {
        src: 'https://127.0.0.1/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',
      },
    ],
    scripts: [
      {
        src: 'https://127.0.0.1/analytics.js',
      },
    ],
  }),
})

去重

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

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

<HeadContent />

<HeadContent /> 组件是必需的，用于渲染文档的 head、title、meta、link 和 head 相关的 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>
  ),
})

单页应用

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 的全栈实现，则包括 hydration）。

要做到这一点，您必须：

使用 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 />
    </>
  ),
})