Statische Routendaten

Beim Erstellen von Routen können Sie optional eine Eigenschaft namens staticData in den Routenoptionen angeben. Dieses Objekt kann buchstäblich alles enthalten, solange es synchron verfügbar ist, wenn Sie Ihre Route erstellen.

Zusätzlich zum Zugriff auf diese Daten über die Route selbst können Sie auch von jedem Match unter der Eigenschaft match.staticData darauf zugreifen.

Beispiel

posts.tsx

tsx

import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/posts')({
  staticData: {
    customData: 'Hello!',
  },
})

import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/posts')({
  staticData: {
    customData: 'Hello!',
  },
})

Sie können dann auf diese Daten von überall zugreifen, wo Sie Zugriff auf Ihre Routen haben, einschließlich Matches, die ihren Routen zugeordnet werden können.

__root.tsx

tsx

import { createRootRoute } from '@tanstack/react-router'

export const Route = createRootRoute({
  component: () => {
    const matches = useMatches()

    return (
      <div>
        {matches.map((match) => {
          return <div key={match.id}>{match.staticData.customData}</div>
        })}
      </div>
    )
  },
})

import { createRootRoute } from '@tanstack/react-router'

export const Route = createRootRoute({
  component: () => {
    const matches = useMatches()

    return (
      <div>
        {matches.map((match) => {
          return <div key={match.id}>{match.staticData.customData}</div>
        })}
      </div>
    )
  },
})

Erzwingen statischer Daten

Wenn Sie erzwingen möchten, dass eine Route statische Daten hat, können Sie Deklarationszusammenführung verwenden, um der statischen Option der Route einen Typ hinzuzufügen.

tsx

declare module '@tanstack/react-router' {
  interface StaticDataRouteOption {
    customData: string
  }
}

declare module '@tanstack/react-router' {
  interface StaticDataRouteOption {
    customData: string
  }
}

Wenn Sie nun versuchen, eine Route ohne die Eigenschaft customData zu erstellen, erhalten Sie einen Typfehler.

tsx

import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/posts')({
  staticData: {
    // Property 'customData' is missing in type '{ customData: number; }' but required in type 'StaticDataRouteOption'.ts(2741)
  },
})

import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/posts')({
  staticData: {
    // Property 'customData' is missing in type '{ customData: number; }' but required in type 'StaticDataRouteOption'.ts(2741)
  },
})

Optionale statische Daten

Wenn Sie statische Daten optional machen möchten, fügen Sie einfach ein ? zur Eigenschaft hinzu.

tsx

declare module '@tanstack/react-router' {
  interface StaticDataRouteOption {
    customData?: string
  }
}

declare module '@tanstack/react-router' {
  interface StaticDataRouteOption {
    customData?: string
  }
}

Solange es erforderliche Eigenschaften auf der StaticDataRouteOption gibt, müssen Sie ein Objekt übergeben.

Beispiel

Erzwingen statischer Daten

Optionale statische Daten

Bytes abonnieren

Bytes abonnieren