静态路由数据

静态路由数据

在创建路由时，您可以选择在路由的选项中指定 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 上有任何必需的属性，您都必须传入一个对象。

示例

强制静态数据

可选静态数据

订阅 Bytes

订阅 Bytes