静态路由数据

创建路由时，您可以选择在路由选项中指定一个 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