Lazy loading routes instead of components

Hi, I'd like to have a separate file for each main route, but I'm not sure how to do that using lazy

<Routes>
            <Route path='/*' component={MainLayout}>
                <Route path='/' component={Home} />
                <Route path="/privacy" component={Privacy} />
                <Route path="/tos" component={ToS} />
                <Route path="/shards" component={Shards} />
                <Route path="/commands" component={Commands} />

                <Route path="/profile" data={UserRouteData}>
                    //...
                </Route>

                <Route path="/admin" component={AdminLayout}>
                    //...
                </Route>

                <Route path="/admin/updates/new" component={CreateUpdate}/>

                <Route path="/blogs">
                    //...
                </Route>

                <Route path="/dashboard" component={ServerPanel}/>
                <Route path="/dashboard/:guildID" component={DashboardLayout} >
                    //...
                </Route>
            </Route>
        </Routes>

<Routes>
            <Route path='/*' component={MainLayout}>
                <Route path='/' component={Home} />
                <Route path="/privacy" component={Privacy} />
                <Route path="/tos" component={ToS} />
                <Route path="/shards" component={Shards} />
                <Route path="/commands" component={Commands} />

                <Route path="/profile" data={UserRouteData}>
                    //...
                </Route>

                <Route path="/admin" component={AdminLayout}>
                    //...
                </Route>

                <Route path="/admin/updates/new" component={CreateUpdate}/>

                <Route path="/blogs">
                    //...
                </Route>

                <Route path="/dashboard" component={ServerPanel}/>
                <Route path="/dashboard/:guildID" component={DashboardLayout} >
                    //...
                </Route>
            </Route>
        </Routes>

those are my routes. What I'd imagine is a file for homepage. privacy, tos, shards, commands, then profile but that should include also its subroutes, same with admin and blogs and dashboard. How can I lazy load several components at once?

1 Reply

Brendan•2y ago

import {lazy} from "solid-js";
<Route path='/' component={lazy(() => import("./home"))} />

import {lazy} from "solid-js";
<Route path='/' component={lazy(() => import("./home"))} />

If you want the bundler to group all the "child routes" together for the parent route, you may be able to have a separate <Routes> section (for the child routes) within the lazy-loaded parent component, and just don't use lazy for the child routes inside there.

Gaming

Programming

Lazy loading routes instead of components