react 使用 react-loadable分包
React 分包 使用
2023-09-14 08:58:45 时间
yarn add react-loadable
使用
import Loadable from "@/components/loadable";
const Home = Loadable({
loader: () => import('./routes/Home'),
});
const About = Loadable({
loader: () => import('./routes/About'),
});
const App = () => (
<Router>
<Switch>
<Route exact path="/" component={Home}/>
<Route path="/about" component={About}/>
</Switch>
</Router>
);
loadable.js
import L from "react-loadable";
import Loading from "./loading";
const Loadable = props =>
L({
loading: Loading,
delay: 300,
timeout: 10000,
...props,
});
export default Loadable;
loading.js
import React from 'react'
const Loading = props => {
if (props.error) {
return (
<div>
Error! <button onClick={props.retry}>Retry</button>
</div>
);
} else if (props.timedOut) {
return (
<div>
Taking a long time... <button onClick={props.retry}>Retry</button>
</div>
);
} else if (props.pastDelay) {
return <div>Loading...</div>;
} else {
return null;
}
};
export default Loading;
相关文章
- React技巧之鼠标悬浮添加行内样式
- React v18.x 在 react-router v6 使用 lazy 动态加载组件实现
- React Error: Failed at the xxx@0.1.0 start script 'react-scripts start'.
- react的jsx和React.createElement是什么关系?面试常问
- React的5种高级模式
- 「使用 webpack5从0到1搭建React+TypeScript 项目环境」1. React 与 TypeScript 集成
- 老生常谈React的diff算法原理-面试版
- react的jsx和React.createElement是什么关系?面试常问_2023-02-27
- React Fiber 是什么?
- 面试官:说说React-SSR的原理1
- React源码分析1-jsx转换及React.createElement4
- react源码分析:深度理解React.Context_2023-02-07
- 社招前端常见react面试题(必备)_2023-02-26