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     

 

 

問題解決。