[英]Trying to implement a React “Lazy” route for code splitting with React Route and Webpack
我正在嘗試實現“惰性路由”以在我的 React 單頁應用程序中實現代碼拆分。
react-router
Webpack
我有這個組件可以呈現我的所有路線。
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>
);
}
我正在嘗試做這樣的事情:
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>
);
}
這就是我嘗試過的:
LazyRoute.js
function LazyRoute() {
return import("@pages/Component_C").then(({default: Component_C}) => {
return Component_C;
});
}
export default LazyRoute;
Webpack 似乎在拆分這個LazyRoute
捆綁包中發揮了作用:
但我收到了這個錯誤:
我知道我正在通過執行return import()
重新調整Promise
。 但這不是重點嗎?
嗨,你可以在這里使用 React Lazy。 這是一個應該使用您的實現的示例。
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;
剛剛找到了我為此編寫的舊解決方案。
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.