react 路由组件懒加载

高淡可论 發表於 2020-9-14 15:17:00

<h1 style="text-align: center">react 路由组件懒加载</h1>
<h2>1 主要依赖插件：</h2>
react-loadable  :  npm i react-loadable
antd  :  npm i antd
<h2>2 配置文件：</h2>
新建 loadable.js
<div class="cnblogs_code">
<pre>import React from 'react';
//react 版本17》生命周期名称改为 UNSAFE_componentWillMount
import Loadable from 'react-loadable';
import { Spin } from 'antd';
import NotFound from '../components/NotFound/NotFound'
//默认配置
export const defaultsetting = {
timeout: 10000,
delay: 300
};

export const loadable = ( loaders ) => {
return Loadable( {
loader: loaders.loader,
delay: loaders.loadering ? loaders.loadering.delay ? loaders.loadering.delay : 10000 : 10000,
timeout: loaders.loadering ? loaders.loadering.timeout ? loaders.loadering.timeout : 300 : 300,
loading: Loading,
} );
};

export default loadable;

function Loading ( props ) {
if ( props.error ) {
return (
 <div>
 <NotFound NotFoundmode={ 'Error' }/>
 </div>
 );
}
else if ( props.timedOut ) {
return (
 <div style={ {
 width: '100%',
 height: '50rem',
 textAlign: 'center',
 position: 'relative',
 lineHeight: '50rem',
 zIndex: 100,
 } }>
 <Spin tip="请稍等..." size="large"/>
 </div>
 );
}
else if ( props.pastDelay ) {
return (
 <div style={ {
 width: '100%',
 height: '50rem',
 textAlign: 'center',
 position: 'relative',
 lineHeight: '50rem',
 zIndex: 100,
 } }>
 <Spin tip="超时，请刷新..." size="large"/>
 </div>
 )
}
else {
return (
 <></>
 )
}
}</pre>
</div>
编辑路由文件：router.jsx
<div class="cnblogs_code">
<pre>import React from 'react'
import {Router, Route, Switch,Redirect} from 'react-router-dom'
import { createBrowserHistory } from 'history'

import {loadable} from '@/utils/loadable'; //懒加载模块
import Login from '@/pages/login';//普通加载模块
const Main = loadable({loader: () => import('@/pages/main')}); //引用
const NotFound404 = loadable({loader: () => import('@/components/NotFound/NotFound')});//引用

const history = createBrowserHistory();

class RouteMap extends React.Component {
render () {
return (
 <Router history={ history }>
 <Switch >
 <Route path="/" exact component={Login}/>
 <Route path="/login" component={Login}/>
 <Route path="/main" component={Main}/>
 <Route path="/404" component={NotFound404}/>
 <Redirect from="/*" to="/404"/>
 </Switch>
 </Router>
 )
}
}

export default RouteMap

//_this.props.history.push('/main')//跳转可后退
//_this.props.history.replace('/main')//跳转不可后退
// <Redirectfrom="/*" to="/" /> //重定向
// <Route path="*" component={NotFound404}/>//默认</pre>
</div>
 
控制台有这种警告时候是因为react版本语法问题
<img src="https://img2020.cnblogs.com/blog/1506521/202009/1506521-20200914151250526-2010045108.png" alt="" width="779" height="322" loading="lazy">
 
 
react-dom.development.js:88 Warning: componentWillMount has been renamed, and is not recommended for use. See https://fb.me/react-unsafe-component-lifecycles for details.
* Move code with side effects to componentDidMount, and set initial state in the constructor. * Rename componentWillMount to UNSAFE_componentWillMount to suppress this warning in non-strict mode. In React 17.x, only the UNSAFE_ name will work. To rename all deprecated lifecycles to their new names, you can run `npx react-codemod rename-unsafe-lifecycles` in your project source folder.
Please update the following components: LoadableComponent
 
解决方法：
打开   react-loadable     插件启动目录，搜索 componentWillMount     改为  UNSAFE_componentWillMount     
<img src="https://img2020.cnblogs.com/blog/1506521/202009/1506521-20200914151527512-1688955320.png" alt="" width="906" height="441" loading="lazy">
 
 
问题解决。   

</div>
<div id="MySignature" role="contentinfo">
转载标明来路-博客园，
联系方式1763907618@qq.com 
来源：https://www.cnblogs.com/wangyongping/p/13666870.html

頁: [1]

琼殿技术论坛's Archiver

react 路由组件懒加载