Is there an option to lazy-load a group of routes in one chunk?

In react-router-dom (not data-router, but in the old one) it could be done somewhat like this:

// pages/SubRoutes.tsx
export const SubRoutes: FC = () => {
  return (
    <Routes>
      <Route
        index
        element={/*...*/}
      />
      {/*...*/}
    </Routes>
  );
};

// main.tsx
const LazySubRoutes = lazy(() => import('/pages/SubRoutes'));

const App = () => (
  <Routes>
    <Route
      path="muni"
      element={
        <React.Suspense fallback={<>...</>}>
          <LazySubRoutes />
        </React.Suspense>
      }
    />
  </Routes>
);

// pages/SubRoutes.tsx
export const SubRoutes: FC = () => {
  return (
    <Routes>
      <Route
        index
        element={/*...*/}
      />
      {/*...*/}
    </Routes>
  );
};

// main.tsx
const LazySubRoutes = lazy(() => import('/pages/SubRoutes'));

const App = () => (
  <Routes>
    <Route
      path="muni"
      element={
        <React.Suspense fallback={<>...</>}>
          <LazySubRoutes />
        </React.Suspense>
      }
    />
  </Routes>
);

Is it possible to replicate this kind of behaviour with tanstack router?

Appreciate any help

TanStack•2y ago•

2 replies

then-purple

Is there an option to lazy-load a group of routes in one chunk?

In react-router-dom (not data-router, but in the old one) it could be done somewhat like this:

// pages/SubRoutes.tsx
export const SubRoutes: FC = () => {
  return (
    <Routes>
      <Route
        index
        element={/*...*/}
      />
      {/*...*/}
    </Routes>
  );
};

// main.tsx
const LazySubRoutes = lazy(() => import('/pages/SubRoutes'));

const App = () => (
  <Routes>
    <Route
      path="muni"
      element={
        <React.Suspense fallback={<>...</>}>
          <LazySubRoutes />
        </React.Suspense>
      }
    />
  </Routes>
);

// pages/SubRoutes.tsx
export const SubRoutes: FC = () => {
  return (
    <Routes>
      <Route
        index
        element={/*...*/}
      />
      {/*...*/}
    </Routes>
  );
};

// main.tsx
const LazySubRoutes = lazy(() => import('/pages/SubRoutes'));

const App = () => (
  <Routes>
    <Route
      path="muni"
      element={
        <React.Suspense fallback={<>...</>}>
          <LazySubRoutes />
        </React.Suspense>
      }
    />
  </Routes>
);

Is it possible to replicate this kind of behaviour with tanstack router?

Appreciate any help

Is there an option to lazy-load a group of routes in one chunk?

Similar Threads

Is there an option to lazy-load a group of routes in one chunk?

Similar Threads

Similar Threads

Similar Threads