정적 라우트 데이터

라우트를 생성할 때 라우트 옵션에 staticData 속성을 선택적으로 지정할 수 있습니다. 라우트를 생성할 때 동기적으로 사용할 수 있다면 이 객체에는 원하는 모든 것을 포함할 수 있습니다.

라우트 자체에서 이 데이터에 액세스할 수 있을 뿐 아니라, 모든 매치에서 match.staticData 속성을 통해 액세스할 수도 있습니다.

예제

React

src/routes/posts.tsx

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

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

이후 라우트에 액세스할 수 있는 모든 곳에서, 라우트로 다시 매핑할 수 있는 매치를 포함해 이 데이터에 액세스할 수 있습니다.

src/routes/__root.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>
    )
  },
})

Solid

src/routes/posts.tsx

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

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

이후 라우트에 액세스할 수 있는 모든 곳에서, 라우트로 다시 매핑할 수 있는 매치를 포함해 이 데이터에 액세스할 수 있습니다.

src/routes/__root.tsx

import { createRootRoute, useMatches } from '@tanstack/solid-router'
import { For } from 'solid-js'

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

    return (
      <div>
        <For each={matches()}>
          {(match) => <div>{match.staticData.customData}</div>}
        </For>
      </div>
    )
  },
})

정적 데이터 강제

라우트에 정적 데이터가 있도록 강제하려면 선언 병합을 사용해 라우트의 static 옵션에 타입을 추가할 수 있습니다.

React

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

Solid

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

이제 customData 속성 없이 라우트를 생성하려고 하면 타입 오류가 발생합니다.

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

선택적 정적 데이터

정적 데이터를 선택 사항으로 만들려면 속성에 ?를 추가하면 됩니다.

React

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

Solid

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

StaticDataRouteOption에 필수 속성이 있으면 객체를 전달해야 합니다.

일반적인 패턴

레이아웃 표시 여부 제어

staticData를 사용해 레이아웃 요소를 표시하거나 숨길 라우트를 제어합니다.

src/routes/admin/route.tsx

export const Route = createFileRoute('/admin')({
  staticData: { showNavbar: false },
  component: AdminLayout,
})

// routes/__root.tsx
function RootComponent() {
  const showNavbar = useMatches({
    select: (matches) =>
      !matches.some((m) => m.staticData?.showNavbar === false),
  })

  return showNavbar ? (
    <Navbar>
      <Outlet />
    </Navbar>
  ) : (
    <Outlet />
  )
}

브레드크럼용 라우트 제목

React

src/routes/posts/$postId.tsx

export const Route = createFileRoute('/posts/$postId')({
  staticData: {
    getTitle: () => 'Post Details',
  },
})

src/components/Breadcrumbs.tsx

function Breadcrumbs() {
  const matches = useMatches()

  return (
    <nav>
      {matches
        .filter((m) => m.staticData?.getTitle)
        .map((m) => (
          <span key={m.id}>{m.staticData.getTitle()}</span>
        ))}
    </nav>
  )
}

Solid

src/routes/posts/$postId.tsx

export const Route = createFileRoute('/posts/$postId')({
  staticData: {
    getTitle: () => 'Post Details',
  },
})

src/components/Breadcrumbs.tsx

import { useMatches } from '@tanstack/solid-router'
import { For } from 'solid-js'

function Breadcrumbs() {
  const matches = useMatches()

  return (
    <nav>
      <For each={matches().filter((m) => m.staticData?.getTitle)}>
        {(m) => <span>{m.staticData.getTitle()}</span>}
      </For>
    </nav>
  )
}

staticData와 Context 중 사용 시점

staticData	context
동기식이며 라우트 생성 시 정의됨	비동기 가능(beforeLoad를 통해)
로드 시작 전에 사용 가능	params/search에 의존 가능
라우트의 모든 인스턴스에서 동일함	자식 라우트로 전달됨

정적 라우트 메타데이터에는 staticData를 사용합니다. 요청마다 달라지는 동적 데이터나 인증 상태에는 context를 사용합니다.