I'm trying to implement a "lazy-route" to achieve code splitting in my React single page app.
react-router
Webpack
I have this component that renders all my routes.
AllRoutes.js
function AllRoutes() {
return(
<Switch>
<Route exact path={"/ROUTE_A"} component={Component_A}/>
<Route exact path={"/ROUTE_B"} component={Component_B}/>
// AND SO ON
</Switch>
);
}
I'm trying to do something like this:
import LazyRoute from './LazyRoute';
function AllRoutes() {
return(
<Switch>
<Route exact path={"/ROUTE_A"} component={Component_A}/>
<Route exact path={"/ROUTE_B"} component={Component_B}/>
<Route exact path={"/ROUTE_C"} component={LazyRoute}/> // THIS SHOULD LAZY LOAD
</Switch>
);
}
And this is what I've tried:
LazyRoute.js
function LazyRoute() {
return import("@pages/Component_C").then(({default: Component_C}) => {
return Component_C;
});
}
export default LazyRoute;
Webpack seems to be doing its part in splitting this LazyRoute
bundle:
But I'm getting this error:
I know I'm retuning a Promise
by doing return import()
. But isn't this the whole point?
Hi you can use React Lazy here. Here is an example that should work using your implementation.
import React, { lazy } from "react";
import { Route, Switch } from "react-router-dom";
import LazyRoute from './LazyRoute';
const Component_C = lazy(() => import("./Component_C"));
function AllRoutes() {
return (
<Switch>
<Route exact path={"/ROUTE_A"} component={Component_A}/>
<Route exact path={"/ROUTE_B"} component={Component_B}/>
<Route exact path={"/ROUTE_C"} component={LazyRoute(Component_C)}/> // THIS SHOULD LAZY LOAD
</Switch>
);
}
LazyRoute.js
import React, { Suspense } from "react";
function LazyRoute(Component) {
return props => (
<Suspense fallback={<div>Loading...</div>}>
<Component {...props} />
</Suspense>
);
}
export default LazyRoute;
Just found an old solution that I wrote for this.
import React, { useEffect, useState } from 'react';
import styled from 'styled-components';
const LS = {};
LS.Container_DIV = styled.div`
`;
async function lazyRender() {
const TestContainer = (await import("@pages/Test/TestContainer"));
return new Promise((resolve) => {
resolve(TestContainer);
});
}
function LazyRoute(props) {
console.log('Rendering LazyRoute...');
const [lazyLoading,setLazyLoading] = useState(true);
const [LazyComponent,setLazyComponent] = useState(null);
useEffect(() => {
async function getLazyComponent() {
const component = await lazyRender();
setLazyComponent(component);
setLazyLoading(false);
}
getLazyComponent();
},[]);
return(
lazyLoading ?
<div>I am Lazy Loading....</div>
: <LazyComponent.default {...props}/>
);
}
export default React.memo(LazyRoute);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.