Lazy Loading Rec'd Approach?

Hi,

I noticed that the Kitchen Sink + Reacty Query (file based) example in

routes/expensive/index.tsx

routes/expensive/index.tsx

looks like this:

export const Route = createFileRoute('/expensive/')({
  component: lazyRouteComponent(() => import('./-components/Expensive')),
})

export const Route = createFileRoute('/expensive/')({
  component: lazyRouteComponent(() => import('./-components/Expensive')),
})

But the docs page for

lazyRouteComponent

lazyRouteComponent

say it's rec'd to use

createLazyFileRoute

createLazyFileRoute

. The code splitting example in docs for "Code Splitting" also take the

createLazyFileRoute

createLazyFileRoute

approach.

Is there a reason why the file system based routing Kitchen Sink + React Query example uses this approach if it's not recommended?

I am looking at implementing @tanstack/router in a medium sized project with react-router that's using

<Routes> <Route component={<Foo />} > </Routes>

<Routes> <Route component={<Foo />} > </Routes>

<--- this approach

So, I am just trying to understand all the concepts before I start ripping apart the code : )

TanStack•3y ago•

6 replies

dead-brown

Lazy Loading Rec'd Approach?

Hi,

I noticed that the Kitchen Sink + Reacty Query (file based) example in

routes/expensive/index.tsx

routes/expensive/index.tsx

looks like this:

export const Route = createFileRoute('/expensive/')({
  component: lazyRouteComponent(() => import('./-components/Expensive')),
})

export const Route = createFileRoute('/expensive/')({
  component: lazyRouteComponent(() => import('./-components/Expensive')),
})

But the docs page for

lazyRouteComponent

lazyRouteComponent

say it's rec'd to use

createLazyFileRoute

createLazyFileRoute

. The code splitting example in docs for "Code Splitting" also take the

createLazyFileRoute

createLazyFileRoute

<Routes> <Route component={<Foo />} > </Routes>

<Routes> <Route component={<Foo />} > </Routes>

<--- this approach

So, I am just trying to understand all the concepts before I start ripping apart the code : )

Lazy Loading Rec'd Approach?

Similar Threads

Lazy Loading Rec'd Approach?

Similar Threads

Similar Threads

Similar Threads