How to code split multiple React routes into one file?

349 views Asked by At

I currently have the following lazy component imports:

const LazyDashboard = React.lazy(() => import('./pages/app/Dashboard'));
const LazyProfile = React.lazy(() => import('./pages/app/Profile'));

Then in the routes,

{userToken && <><Route exact path="/app" element={<LazyDashboard/>}/> 
                <Route exact path="/app" element={<LazyProfile/>}/></>}
  • Going to the dashboard, a chunk is loaded in. Good!
  • Going to the profile, another chunk is loaded in.. Not good! How do I mark these two imports to be bundled in the same chunk?

Is there any way to do this with React.lazy?

0

There are 0 answers