Verwaltung des Dokument-Heads

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

Automatische Deduplizierung von Titel- und Meta-Tags
Automatische Lade-/Entladung von Tags basierend auf der Routen-Sichtbarkeit
Eine komponierbare Möglichkeit, Titel- und Meta-Tags von verschachtelten Routen zusammenzuführen

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

SEO
Social Media Sharing
Analytik
Laden/Entladen von CSS und JS

Um den Dokument-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.

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 das **letzte** Vorkommen jedes Tags, das in verschachtelten Routen gefunden wird.

Titel-Tags, die in verschachtelten Routen definiert sind, überschreiben ein Titel-Tag, das in einer übergeordneten Route definiert ist (Sie können sie jedoch kombinieren, was in einem späteren Abschnitt dieser Anleitung behandelt wird).
Meta-Tags mit demselben name oder property werden durch das letzte 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 Komponentenbaum gerendert werden**, wenn Ihre Anwendung das <head>-Tag nicht verwaltet oder verwalten kann.

Start/Full-Stack-Anwendungen

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

Single-Page-Anwendungen

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

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

Verwaltung von Body-Skripten

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

Dazu müssen Sie

Die scripts-Eigenschaft des routeOptions-Objekts verwenden
Die Komponente <Scripts /> rendern

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 Komponentenbaum gerendert werden, wenn Ihre Anwendung das <body>-Tag nicht verwaltet oder verwalten kann.

Beispiel

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

Verwaltung des Dokumenten-Headers