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"
        ]
  },