静态路由数据 | TanStack Router React Docs

静态路由数据

在创建路由时，您可以在路由的选项中可选地指定一个 staticData 属性。只要在创建路由时同步可用，此对象可以包含您想要的任何内容。

除了能够从路由本身访问此数据外，您还可以从 match.staticData 属性下的任何匹配中访问它。

示例

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

然后，您可以在任何可以访问路由的地方访问此数据，包括可以映射回其路由的匹配。

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

强制静态数据

如果您想强制路由具有静态数据，可以使用声明合并为路由的静态选项添加类型：

tsx

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

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

现在，如果您尝试创建没有 customData 属性的路由，您将收到类型错误：

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

可选静态数据

如果您想使静态数据可选，只需在属性中添加 ?：

tsx

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

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

只要 StaticDataRouteOption 上有任何必需的属性，您就需要传入一个对象。