创建路由属性顺序

创建路由属性顺序

对于以下函数，由于类型推断的原因，传入对象的属性顺序非常重要：

createRoute
createFileRoute
createRootRoute
createRootRouteWithContext

正确的属性顺序如下：

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

其他所有属性对顺序不敏感，因为它们不依赖于类型推断。

规则详情

该规则的错误代码示例：

tsx

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

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

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

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

该规则的正确代码示例：

tsx

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

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

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

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

特性

✅ 推荐
🔧 可自动修复

规则详情

特性

Subscribe to Bytes

Subscribe to Bytes