Efficient Code Splitting for Dashboard Pages using React Router

[Sajarin-M]

Hey everyone 👋,

I am currently working on an app that has two different types of dashboards: 'Staff' and 'Admin'. To improve the user experience, I have implemented code splitting for these two dashboards so that all pages for a specific dashboard are fully loaded when a user logs in. However, I am wondering if this is the best approach or if there is a nicer way to do this. 🤔

Additionally, I am now looking to migrate to the new data router in React Router v6. Is there a way to achieve this same behavior with the data router? ❓

Here is my current code for the App.js file:

const AdminDashboard = lazy(() => import('./admin'));
const StaffDashboard = lazy(() => import('./staff'));

function App() {
  return (
    <Routes>
      <Route path='/' element={<Navigate to="appropriate dashboard" />} />
      <Route path='login' element={<Login />} />
      <Route path='admin/*' element={<AdminDashboard />} />
      <Route path='staff/*' element={<StaffDashboard />} />
    </Routes>
   )
}

and for the admin.js and staff.js file:

// admin.js

function AdminDashboard() {
  return (
    <Routes>
      {/* other admin page routes */}
    </Routes>
   )
}

// staff.js

function StaffDashboard() {
  return (
    <Routes>
      {/* other staff page routes */}
    </Routes>
   )
}

I would really appreciate any suggestions or advice on how to improve this code or how to achieve this behavior with the new data router. 😄