react使用动态加载组件

我还是一个react的初学者，一直写vue，在学的过程中突然想起react能不能动态加载，结果好像都要自己实现，vue的路由可以用()=>import(url),

react 好像没有，然后在网上看了些大佬的资料，结合之后自己项目里面实现的思路，如有什么错误，请评论区指正哈，我好改进

1.实际的组件A

import React, { Component } from 'react';
console.log("test require")
class Testasnyc extends Component{
    
    render(){
        

        return (
            <div>
                测试异步
            </div>
        )
    }
}
module.exports=Testasnyc

2.父组件引用的组件B

import React, { Component } from 'react';
console.log("test import ")
class Testasnyc extends Component {
    render() {
      const Game1 = require('./index')//引入
        return (
          <Game1/>
        )
    }
};
export { Testasnyc }

 

实际组件是用一个B组件包裹起来，路由引入的是B组件，而不是A组件，用的require引入

require/exports 是运行时动态加载，import/export 是静态编译

所以运行的时候可以看到 项目初始化就可以看到test import的输出 而test require 是等页面打开才输出

用require如果报错可能是以下原因，下面是我个人踩的坑，给后来人借鉴以下

require和es6的import混合使用会报错` TypeError: Cannot assign to read only property 'exports' of object '#<Object>'.. `因此需要使用插件`babel/plugin-transform-modules-commonjs`解决问题   

   npm install --save-dev @babel/plugin-transform-modules-commonjs

添加插件后有两种处理方式

 在项目根目录新增.babelrc文件，并在文件中加入

 {
            "plugins": ["@babel/plugin-transform-modules-commonjs"]
      } 

　

第一种如果以下错误，就需要使用第二种加入方式，因为package里面已集成Babel的配置

./src/index.js
Error: Multiple configuration files found. Please remove one:
 - package.json
 - D:\project\private\react_project\studyreact-demo\.babelrc
from D:\project\private\react_project\studyreact-demo
    at Array.reduce (<anonymous>)
    at loadOneConfig.next (<anonymous>)
    at findRelativeConfig.next (<anonymous>)
    at buildRootChain.next (<anonymous>)
    at loadPrivatePartialConfig.next (<anonymous>)

 - 在文件的package.json里面添加  

 "babel": {
        "plugins": [
        [
            "@babel/plugin-proposal-decorators",
            {
            "legacy": true
            }
        ],
        "@babel/plugin-transform-modules-commonjs"
        ],
        "presets": [
        "react-app"
        ]
  },