静态路由数据

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

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

示例

posts.tsx

tsx

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

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

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

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

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

__root.tsx

tsx

import { createRootRoute } from '@tanstack/solid-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/solid-router'

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

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

强制使用静态数据

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

tsx

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

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

现在，如果您尝试创建一个不带 customData 属性的路由，您将收到一个类型错误。

tsx

import { createFileRoute } from '@tanstack/solid-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/solid-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/solid-router' {
  interface StaticDataRouteOption {
    customData?: string
  }
}

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

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

示例

强制使用静态数据

可选的静态数据

订阅 Bytes

订阅 Bytes