T
TanStack•2y ago
fair-rose

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
1 Reply
stormy-gold
stormy-gold•2y ago
no, this does not exist (yet) previous discussion: https://discord.com/channels/719702312431386674/1230934365769306254

Did you find this page helpful?