react 路由组件懒加载

高淡可论

react 路由组件懒加载

1 主要依赖插件：

react-loadable  :  npm i react-loadable

antd  :  npm i antd

2 配置文件：

新建 loadable.js

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 (
      <></>
    )
  }
}

编辑 路由文件：router.jsx

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')//跳转不可后退
// <Redirect  from="/*" to="/" /> //重定向
// <Route path="*" component={NotFound404}/>//默认

 

控制台有这种警告时候是因为react版本语法问题

 

 

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     

 

 

问题解决。   

转载标明来路-博客园， 联系方式1763907618@qq.com

来源：https://www.cnblogs.com/wangyongping/p/13666870.html