SolidJSS
SolidJS•2d ago•
18 replies
H^7jc&DxY6J$8F2en%VMtARSB9EIz

Lazily loaded grouped routes

I have quite a dilemma regarding grouping some routes together in a one lazy load. For example I have some basic routes like
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>
  );
}


and it makes sense to this point, though let's say that if neither login nor reset routes are matched, I want to go to another router for dashboard related routes, but instead of loading each dashboard subpage lazily one by one, I want to load them at once and additionally use some wrapper (like Router's root=) on the dashboard routes. I came up with something like:

// 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>
  );
}
Was this page helpful?