how is it possible to create lazy loading with this syntax?
const A = React.lazy(() => import("./A"));
const B = React.lazy(() => import("./B"));
function App() {
return (<Routes>
<Route
path="firstPath"
element={<A />} />
<Route
path="secondPath"
element={<B />} />
</Routes>)
}
I was thinking that with this syntax A and B will be called when we pass them into element props and lazy loading wouldn't be possible.
You can wrap all in one Suspense:
const Home = lazy(() => import('./home'));
const About = lazy(() => import('./about'));
function App() {
return (
<Router>
<Suspense fallback={<p> Loading...</p>}>
<Routes>
<Route path='/' element={<Home />} />
<Route path='/about' element={<About />} />
</Routes>
</Suspense>
</Router>
);
}
Outlet though? Currently our whole app shows the fallback element - even though only the screen within the outlet is changingIt is, and you wrap the route's components in a Suspense wrapper.
import { Suspense } from 'react';
const A = React.lazy(() => import("./A"));
const B = React.lazy(() => import("./B"));
function App() {
return (
<Routes>
<Route
path="firstPath"
element={
<Suspense fallback={<>...</>}>
<A />
</Suspense>
}
/>
<Route
path="secondPath"
element={
<Suspense fallback={<>...</>}>
<B />
</Suspense>
}
/>
</Routes>
);
}
Route component?"From v6.9.0. react-router supports lazy loading
const routes = createRoutesFromElements(
<Route path="/" element={<Layout />}>
<Route path="a" lazy={() => import("./a")} />
<Route path="b" lazy={() => import("./b")} />
</Route>
);
Docs: https://reactrouter.com/en/6.9.0/route/lazy
Github: https://github.com/remix-run/react-router/releases/tag/react-router%406.9.0
I don't think the React Router API affords this.
Code splitting is orthogonal to module loading, i.e. it can happen correctly without having achieved the behavior of: loading modules only once routed to.
Suspense can be placed anywhere above, and it must be by the time we ask a question like this as the application will fault without it.
When you write <A /> and <B /> in this parent component's rendering, as you have, as the Route element prop values, this causes the lazy module loading to happen then, during App render for any route, as these expressions are renderings of A and B.
If the React-Router API permitted lazy loading, it would let you defer rendering the routed-to component until that route is selected.
The typical way any value's computation is deferred in EcmaScript is by creating a function that returns the result. For example, in some other imaginary Router API, one might be permitted to write instead () => <A /> and () => <B />.
If at the basic level we end up with, internal to the imaginary Router library, const SelectedRoute: React.FC = () => <A />, then the lazy load of the A module would commence only once render arrives at <SelectedRoute />.
Thank you for reading.
