Lazily loaded grouped routes

const Login = lazy(() => import("./pages/login"));
const Reset = lazy(() => import("./pages/reset"));

export default function App() {
  return (
     <Router>
      <Route path="/login" component={Login} />
      <Route path="/reset" component={Reset} />
     </Router>
  );
}

// dashboard.tsx
import Calendar from "./calendar";
import Assignments from "./assignments";

const Layout = (props: { children?: JSX.Element }) => {
  return (
    <SocketContextProvider>
      <ShellContextProvider>
        <Shell>
          {props.children}
        </Shell>
      </ShellContextProvider>
    </SocketContextProvider>
  );
}

export default function Dashboard() {
  return (
    <Route path="/" component={Layout}>
      <Route path="/calendar" component={Calendar} />
      <Route path="/assignments" component={Assignments} />
      {/* ... */ }
    </Route>
  );
}

// app.tsx
const Login = lazy(() => import("./pages/login"));
const Reset = lazy(() => import("./pages/reset"));
const Dashboard = lazy(() => import("./pages/dashboard"));

export default function App() {
  return (
     <Router>
      <Route path="/login" component={Login} />
      <Route path="/reset" component={Reset} />
      <Route path="/*" component={Dashboard} />
     </Router>
  );
}