我还是一个react的初学者，一直写vue，在学的过程中突然想起react能不能动态加载，结果好像都要自己实现，vue的路由可以用()=>import(url),
react 好像没有，然后在网上看了些大佬的资料，结合之后自己项目里面实现的思路，如有什么错误，请评论区指正哈，我好改进
1.实际的组件
A
import React, { Component } from 'react';
console.log("test require")
class Testasnyc extends Component{
render(){
return (
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"
