📄 tanstack/router/latest/docs/eslint/create-route-property-order
File: create-route-property-order.md | Updated: 11/15/2025
Source: https://tanstack.com/router/latest/docs/eslint/create-route-property-order
Search...
+ K
Auto
Docs Examples GitHub Contributors
Docs Examples GitHub Contributors
Docs Examples GitHub Contributors
Docs Examples Github Contributors
Docs Examples Github Contributors
Docs Examples Github Contributors
Docs Examples Github Contributors
Docs Examples Github Contributors
Maintainers Partners Support Learn StatsBETA Discord Merch Blog GitHub Ethos Brand Guide
Documentation
Framework
React
Version
Latest
Search...
+ K
Menu
Getting Started
Installation Guides
Routing
Guides
API
Integrations
ESLint
Router Examples
Framework
React
Version
Latest
Menu
Getting Started
Installation Guides
Routing
Guides
API
Integrations
ESLint
Router Examples
On this page
Ensure correct order of inference sensitive properties for createRoute functions
Copy Markdown
For the following functions, the property order of the passed in object matters due to type inference:
- createRoute
- createFileRoute
- createRootRoute
- createRootRouteWithContext
The correct property order is as follows
- params, validateSearch
- loaderDeps, search.middlewares, ssr
- context
- beforeLoad
- loader
- onEnter, onStay, onLeave, head, scripts, headers, remountDeps
All other properties are insensitive to the order as they do not depend on type inference.
Examples of incorrect code for this rule:
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'})
})
/* 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'})
})
Examples of correct code for this rule:
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)),
}
})
/* 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)),
}
})
- [x] ✅ Recommended
- [x] 🔧 Fixable
