Before Vue, there were many items. I was still very unaccustomed to just use React. The official website was only the most basic API. Many things had to be studied by themselves. Function,

React routing lazy loading, use React-loadable

Install firstnpm i react-loadable --save

Createloadable.jsfile

import React from "react";
import {
     Spin } from 'antd';
import Loadable from "react-loadable";
import '@/assets/css/layout.scss'
// Load animation
const loadingComponent = () => {
    
  return <Spin size="large" />;
};
export default (loader, loading = loadingComponent) => {
    
  return Loadable({
    
    loader,
    loading,
  });
};

Modified in the routing table of React

import Home from '@/pages/home';     // Homepage
import Undefined from '@/pages/error/404';     //404
import loadable from "@/utils/loadable"
export default [
  {
     path: '/Home', component: Home, name: 'Home' },
  {
     path: '/404', component: Undefined, name:'404' },
  {
    
    path: '/systemManage/Usermanage',
    component: loadable(() => import(/* webpackChunkName: "Usermanage" */ "@/pages/systemManage/Usermanage")),
    name: 'User Management'
  },
  {
    
    path: '/order/orderList',
    component: loadable(() => import(/* webpackChunkName: "orderList" */ "@/pages/order/orderList")),
    name: 'Order List'
  },
];

route cache uses React-Router-Cache-Route

Try a few and this is more useful and simple

Document address:Chinese documentation

import React from 'react'
import {
     HashRouter as Router, Route } from 'react-router-dom'
import CacheRoute, {
     CacheSwitch } from 'react-router-cache-route'

import List from './views/List'
import Item from './views/Item'

const App = () => (
  <Router>
    <CacheSwitch>
      <CacheRoute exact path="/list" component={
    List} />
      <Route exact path="/item/:id" component={
    Item} />
      <Route render={
    () => <div>404No page found</div>} />
    </CacheSwitch>
  </Router>
)

export default App

can be modified according to its own project structure. This is the way to use. The current use is much more troublesome than the keyive of Vue, but there is no problem with the implementation function.