createRoute 함수의 추론 민감 속성 순서 확인

다음 함수에서는 타입 추론 때문에 전달된 객체의 속성 순서가 중요합니다.

• createRoute
• createFileRoute
• createRootRoute
• createRootRouteWithContext

올바른 속성 순서는 다음과 같습니다.

• params, validateSearch
• loaderDeps, search.middlewares, ssr
• context
• beforeLoad
• loader
• onEnter, onStay, onLeave, head, scripts, headers, remountDeps

다른 모든 속성은 타입 추론에 의존하지 않으므로 순서와 무관합니다.

규칙 세부 정보

이 규칙의 잘못된 코드 예시입니다.

React

src/routes/path.tsx

/* eslint "@tanstack/router/create-route-property-order": "warn" */
import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/path')({
  loader: async ({ context }) => {
    await context.queryClient.ensureQueryData(getQueryOptions(context.hello))
  },
  beforeLoad: () => ({ hello: 'world' }),
})

Solid

src/routes/path.tsx

/* eslint "@tanstack/router/create-route-property-order": "warn" */
import { createFileRoute } from '@tanstack/solid-router'

export const Route = createFileRoute('/path')({
  loader: async ({ context }) => {
    await context.queryClient.ensureQueryData(getQueryOptions(context.hello))
  },
  beforeLoad: () => ({ hello: 'world' }),
})

이 규칙의 올바른 코드 예시입니다.

React

src/routes/path.tsx

/* eslint "@tanstack/router/create-route-property-order": "warn" */
import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/path')({
  beforeLoad: () => ({ hello: 'world' }),
  loader: async ({ context }) => {
    await context.queryClient.ensureQueryData(getQueryOptions(context.hello))
  },
})

Solid

src/routes/path.tsx

/* eslint "@tanstack/router/create-route-property-order": "warn" */
import { createFileRoute } from '@tanstack/solid-router'

export const Route = createFileRoute('/path')({
  beforeLoad: () => ({ hello: 'world' }),
  loader: async ({ context }) => {
    await context.queryClient.ensureQueryData(getQueryOptions(context.hello))
  },
})

속성

• ✅ 권장
• 🔧 수정 가능