如果了解过React-Router的发展历史的同学，会知道React-Router在v4这个版本之后，做了一件很重要的事情。那就是重构代码，它不再走config的模式进行开发，而是使用了等组件的模式进行管理route。
很多人看到这种模式之后，都分分推出了自己的react-router-config方案，其中业界使用 最多的是react-router-config这个npm库。然后阿里那边也推出约束大于配置的说法。但是这些都是思维有限制的人想出来的吧。虽然我不能代表什么，但是我只想发表一下使用react-route-config的模式让前端一直保留在vue这个阶段，可能是因为vue是config出来大家都按照config来管理，或者是就项目的历史原因。
但是我想说，其实react应该在v4这个版本就应该全面走动模块开发才对的。但是偏偏这几年我发现大家用react还是停留在使用umi.js这个框架居多，要么就是一下使用小项目的create-react-app然后就没自己去维护脚手架了。
以下内容只代表个人观点，因为文案居多方案还是停留在react-router-config
什么是模块化开发。
我们现在有一个系统，这个系统里面有用户模块,商城模块,CMS模块等等等。如同所示。
如果我们需要讲这个系统进行拆开来开发的时候，理论上是一下模式。以一个模块模块的加载到我们的主引用模块然后进行执行。但我们不需要代码的时候，直接在入口文件脱离这个模块，进行完全性解耦。
但是由于router.config.js的配置原因，里面编写这个规定的很死，如果你需要按需加载的加载的时候。 会遇到一些问题。
就是这里的路劲，是写死的，那么如果主模块需要加载子模块的东西，你还需要约束好你的路劲模块。
但是如果你是用RouterV4之后的组件理念，你说做的事情就显得离奇简单，你甚至可以做package，来进行项目管理对于企业管理来说可以做到安全保障（代码的整体代码开发者只能获取一个小模块进行开发，你能说他们能懂你的什么商业模式？）
[如何加载一个微模块]
目前暂时调用我们的模块再rc-modules文件下面，其实我们可以直接做node_modules。因为做成package的模式，我们部署项目的时候不需要再进行编译node_modules里面的文件，就算你的文件再打，都在npm私有库前已经做完。你只需要安装新的包即可（部署的时候），在我的理解安装速度 > 大于编译速度。
我只是举一个简单的例子。
比如我们现在有一个rc-modules/test-modeuls/src/App.tsx的模块。
定义我们的子模块入口文件。
test-modules/src/App.tsx
import React from 'react';
import { Route, Routes } from 'react-router-dom';
function TTT() {
return (
<div>
Google
</div>
)
}
function App() {
return (
<Routes>
<Route path="/" element={<TTT />} />
</Routes>
)
}
export default App;
如何加载到主模块
回到我们的主模块src/App.tsx，只需要再Router把我们的模块加载到Routers下就好了
<Routes>
....
<Route path="/test/*" element={<TestApp />} />
</Routes>
这个时候我们只需要在浏览器加入 /test
即可看到我们的页面效果。
看到这里，大家想想这个图要如果管理你的模块？
或许这才是React-Router-V4想做的初衷，但是却比大厂的模式限制了我们的思考。
如果我是做架构的话，我需要做好我的入口模块的上下文管理。我只需要关心模块的加载和接口的定义，至于如何实现是模块自己的事情。
最近在做一个脚手架用于全面替代umi.js，文件编译的模块使用golang进行并发编译。
目前完成的模块有
至于为什么需要上下文上面有提到，子模块的store和核心功能必须需要上下文来保证唯一性。
