Create a child page route
Define a normal URL-matched page beneath a root route.
TanStack · Function
createRoute
createRoute creates a TanStack Router Route instance from a RouteOptions object. Add the instance to a parent route’s children to build the route tree passed to the router.
How it works
createRoute accepts a RouteOptions object and returns a Route instance. Configure the parent with getParentRoute, define the URL path when applicable, optionally attach loading or rendering behavior, and add the result to a parent’s children before passing the completed tree to the router.
Syntax
createRoute(options: RouteOptions): RouteParameters
| Name | Type | Description |
|---|---|---|
options | RouteOptions | The required options used to configure the route instance, including route hierarchy and route behavior. |
Returns
A new Route instance.
Key points
- The function creates and returns a Route instance.
- The returned instance participates in a route tree through a parent route’s children.
- Its single options object controls the route configuration.
- path controls matching against the URL pathname.
Common mistakes
- Non-root, non-pathless-layout routes must include a path.
- Creating a route alone is insufficient; add it to the parent’s children to build the final route tree.
Example: Create a child route
import { createRoute } from '@tanstack/react-router'
import { rootRoute } from './__root'
const Route = createRoute({
getParentRoute: () => rootRoute,
path: '/about',
component: () => <div>About</div>,
})
const routeTree = rootRoute.addChildren([Route])Defines an About route beneath the root route and adds it to the route tree.
When to use it
Configure route behavior
Attach route behavior such as a loader or component to a route configuration.
Build a route tree
Assemble independently defined routes into the tree consumed by the router.
Interview questions
QWhat does createRoute return, and what is its role?
createRoute takes one required RouteOptions argument and produces a new Route instance. The instance can be supplied as a child of a root route to build the route tree.
Follow-up: How does the route become usable by the router? Add it to the appropriate parent’s children, complete the route tree, and pass that tree to createRouter.
QWhy is getParentRoute needed?
getParentRoute is a function that returns the route’s parent. It connects the new route to the route hierarchy and is required in the documented setup for child routes.
Follow-up: What should be checked when a route is not matched? Verify that getParentRoute returns the intended parent and that the route is included in the constructed tree.
QWhat is the purpose of the path option?
The path identifies the URL pathname segment used to determine whether the route matches. A path is required for routes other than the root route and pathless layout routes.
Follow-up: When might a route omit path? A pathless layout route can omit it while still grouping or applying layout behavior to descendants.
Related
RouteOptionscreateRootRoutecreateRoutercreateFileRouteRoute