Dokument-Head-Management | TanStack Router React Docs

Das Management des Dokumenten-Heads ist der Prozess der Verwaltung von Head-, Titel-, Meta-, Link- und Skript-Tags eines Dokuments. TanStack Router bietet eine robuste Möglichkeit, den Dokumenten-Head für Full-Stack-Anwendungen, die Start verwenden, und für Single-Page-Anwendungen, die @tanstack/react-router verwenden, zu verwalten. Es bietet:

Automatische Deduplizierung von Titel- und Meta-Tags
Automatisches Laden/Entladen von Tags basierend auf der Routensichtbarkeit
Eine komponierbare Möglichkeit, Titel- und Meta-Tags aus verschachtelten Routen zusammenzuführen

Für Full-Stack-Anwendungen, die Start verwenden, und sogar für Single-Page-Anwendungen, die @tanstack/react-router verwenden, ist die Verwaltung des Dokumenten-Heads aus folgenden Gründen ein entscheidender Teil jeder Anwendung:

SEO
Social Media Sharing
Analyse
CSS- und JS-Laden/Entladen

Um den Dokumenten-Head zu verwalten, müssen Sie sowohl die Komponenten <HeadContent /> als auch <Scripts /> rendern und die Eigenschaft routeOptions.head verwenden, um den Head einer Route zu verwalten. Diese gibt ein Objekt mit den Eigenschaften title, meta, links, styles und scripts zurück.

Verwaltung des Dokumenten-Heads

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',
      },
    ],
  }),
})

Deduplizierung

TanStack Router dedupliziert standardmäßig Titel- und Meta-Tags und bevorzugt dabei die letzte Vorkommen jedes Tags, das in verschachtelten Routen gefunden wurde.

Titel-Tags, die in verschachtelten Routen definiert sind, überschreiben einen Titel-Tag, der in einer übergeordneten Route definiert ist (Sie können sie jedoch kombinieren, was in einem späteren Abschnitt dieses Leitfadens behandelt wird).
Meta-Tags mit demselben name oder property werden vom letzten Vorkommen dieses Tags in verschachtelten Routen überschrieben.

<HeadContent />

Die Komponente <HeadContent /> ist erforderlich, um die Head-, Titel-, Meta-, Link- und Head-bezogenen Skript-Tags eines Dokuments zu rendern.

Sie sollte entweder im <head>-Tag Ihres Root-Layouts oder so hoch wie möglich im Komponentenkern gerendert werden, wenn Ihre Anwendung den <head>-Tag nicht verwaltet oder verwalten kann.

Start/Full-Stack-Anwendungen

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

Single-Page-Anwendungen

Entfernen Sie zuerst das <title>-Tag aus der index.html, falls Sie eines gesetzt haben.

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

Verwaltung von Body-Skripten

Zusätzlich zu Skripten, die im <head>-Tag gerendert werden können, können Sie Skripte auch im <body>-Tag über die Eigenschaft routeOptions.scripts rendern. Dies ist nützlich für das Laden von Skripten (auch Inline-Skripten), die das DOM geladen benötigen, aber bevor der Haupteinstiegspunkt Ihrer Anwendung (der Hydration einschließt, wenn Sie Start oder eine Full-Stack-Implementierung von TanStack Router verwenden).

Dazu müssen Sie Folgendes tun:

Verwenden Sie die Eigenschaft scripts des routeOptions-Objekts
Rendern Sie die Komponente <Scripts />

tsx

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

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

<Scripts />

Die Komponente <Scripts /> ist erforderlich, um die Body-Skripte eines Dokuments zu rendern. Sie sollte entweder im <body>-Tag Ihres Root-Layouts oder so hoch wie möglich im Komponentenkern gerendert werden, wenn Ihre Anwendung den <body>-Tag nicht verwaltet oder verwalten kann.

Beispiel

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

Verwaltung des Dokumenten-Headers