TanStackRouter v1
Auto
Framework
Version
Menu
Getting Started
Routing
Guides
How-To
API
ESLint
Router Examples

lazyRouteComponent function

Important

If you are using file-based routing, it's recommended to use the createLazyFileRoute function instead.

The lazyRouteComponent function can be used to create a one-off code-split route component that can be preloaded using a component.preload() method.

lazyRouteComponent options

The lazyRouteComponent function accepts two arguments:

importer option
  • Type: () => Promise<T>
  • Required
  • A function that returns a promise that resolves to an object that contains the component to be loaded.

exportName option
  • Type: string
  • Optional
  • The name of the component to be loaded from the imported object. Defaults to 'default'.

lazyRouteComponent returns
  • A React.lazy component that can be preloaded using a component.preload() method.

Examples
tsx
import { lazyRouteComponent } from '@tanstack/react-router'

const route = createRoute({
  path: '/posts/$postId',
  component: lazyRouteComponent(() => import('./Post')), // default export
})

// or

const route = createRoute({
  path: '/posts/$postId',
  component: lazyRouteComponent(
    () => import('./Post'),
    'PostByIdPageComponent', // named export
  ),
})

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

const route = createRoute({
  path: '/posts/$postId',
  component: lazyRouteComponent(() => import('./Post')), // default export
})

// or

const route = createRoute({
  path: '/posts/$postId',
  component: lazyRouteComponent(
    () => import('./Post'),
    'PostByIdPageComponent', // named export
  ),
})
Edit on GitHub
Home
Our Partners
Clerk
Netlify
Neon
Convex
Sentry
Vercel
Subscribe to Bytes

Your weekly dose of JavaScript news. Delivered every Monday to over 100,000 devs, for free.

Bytes

No spam. Unsubscribe at any time.

Subscribe to Bytes

Your weekly dose of JavaScript news. Delivered every Monday to over 100,000 devs, for free.

Bytes

No spam. Unsubscribe at any time.