文档头部管理 | TanStack Router React Docs

文档头部管理是管理文档的 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://www.google-analytics.com/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://www.google-analytics.com/analytics.js',
      },
    ],
  }),
})

去重

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

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

<HeadContent />

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

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

Start/全栈应用程序

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