[英]Trying to implement a React “Lazy” route for code splitting with React Route and Webpack
I'm trying to implement a "lazy-route" to achieve code splitting in my React single page app.我正在尝试实现“惰性路由”以在我的 React 单页应用程序中实现代码拆分。
react-router
我正在使用react-router
Webpack
也使用Webpack
I have this component that renders all my routes.我有这个组件可以呈现我的所有路线。
AllRoutes.js 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 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: Webpack 似乎在拆分这个LazyRoute
捆绑包中发挥了作用:
But I'm getting this error:但我收到了这个错误:
I know I'm retuning a Promise
by doing return import()
.我知道我正在通过执行return import()
重新调整Promise
。 But isn't this the whole point?但这不是重点吗?
Hi you can use React Lazy here.嗨,你可以在这里使用 React Lazy。 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 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);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.