TanStack · Function

createFileRoute

Creates a file-based TanStack Router route from its generated path. The returned function accepts RouteOptions and produces the configured route instance used in the generated route tree.

How it works

Call createFileRoute with the route file's path, then invoke the returned function with RouteOptions such as a loader or component. Export the configured instance under the Route identifier so the file-based tooling can include it when generating the route tree.

Syntax

createFileRoute(path)(routeOptions)

Parameters

Name	Type	Description
`path`	`string literal`	The full file path represented by the generated route; it is a required string literal and is maintained by the generation tooling.
`routeOptions`	`RouteOptions`	Route configuration, including options such as loader and component.

Returns

The first call returns a function accepting RouteOptions; invoking it returns a configured file Route instance.

Key points

The function creates the route object used by TanStack Router's file-based routing workflow.
The resulting route instance participates in automatic route-tree generation.
Its first call takes exactly one path argument.
That path corresponds to the source file represented by the route.
The initial call returns a configuration function rather than the final route instance.
Pass route options to the returned function to define behavior such as loading data or rendering a component.

Common mistakes

Export the configured route as Route; otherwise the tsr generate and tsr watch commands cannot process it correctly.
The path argument is tooling-managed, so avoid treating it as a manually maintained source of truth when using those commands.

Example: Create a file-based route

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

export const Route = createFileRoute('/')({
  loader: () => 'Hello World',
  component: IndexComponent,
})

function IndexComponent() {
  const data = Route.useLoaderData()
  return <div>{data}</div>
}

This defines the root file route, supplies loader and component options, and reads the loader result in the rendered component.

When to use it

Create application routes

Defining a page in a file-based TanStack Router application.

Load route data

Adding route-specific loading behavior before rendering a component.

Generate a route tree

Connecting generated route files to the application's route tree.

Interview questions

QWhat does createFileRoute do?

It is a factory for creating a file-based route instance. The path string identifies the file route, and the returned function accepts RouteOptions that configure the route.

Follow-up: Why does the API return another function? It separates the file-derived path from route configuration, allowing the generated route file to attach options in a typed way.

QWhat is the function's argument?

It accepts one string argument representing the path of the file from which the route will be generated. The argument is required and has a string-literal type.

Follow-up: How is that path maintained? The tsr generate and tsr watch commands automatically insert and update it.

QWhat does it return, and how must it be exported?

The configured file Route instance is returned after calling the returned function with RouteOptions. For file-based generation to work, that instance must be exported with the identifier Route.

Follow-up: What should be checked when generation omits a route? Verify that the file exports the created instance exactly as Route.

RouteOptions
Route
tsr generate
tsr watch
useLoaderData

Source: createFileRoute function. Checked 2026-10-16.