文档 Head 管理 | TanStack Router Solid 文档

文档 Head 管理是指管理文档的 head、title、meta、link 和 script 标签的过程。TanStack Router 为使用 Start 的全栈应用和使用 @tanstack/solid-router 的单页应用提供了强大的文档 Head 管理方式。它提供了：

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

对于使用 Start 的全栈应用，甚至对于使用 @tanstack/solid-router 的单页应用来说，出于以下原因，管理文档 Head 是任何应用的关键部分：

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

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

管理文档 Head

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 和与 Head 相关的 script 标签。

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

Start/全栈应用

tsx

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

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

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

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

单页应用

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

tsx

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

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

import { HeadContent } from '@tanstack/solid-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/solid-router'
export const Router = createFileRoute('/')({
  component: () => (
    <html>
      <head />
      <body>
        <Outlet />
        <Scripts />
      </body>
    </html>
  ),
})

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

tsx

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

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

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

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

文档头部管理