ReactJs中如何实现多页面应用的效果？

Question

比如一个用户协作类的web应用，按照传统的方式开发的话，可以分成首页、用户登陆后的管理界面，以及一些帮助、联系之类的零碎页面。

请问，如果用react来做的话，该如何组织这些页面？如何管理相应的代码呢？

网上所有的教程都是用index.html引入app.js的方式完成react应用的启动。然后发布时使用webpack从index.html开始做打包。

我个人猜测，想要实现上述的需求，可能的方案有2种：
1.app.js就是所有页面的入口，但是根据url的不同，载入不同的子组件（其实就是子页面最外层的组件）。这样的话打包流程都不变，唯一的问题是，用户第一次进入时加载js代码会很大。（貌似要用到react-router）
2.每个页面有一个单独的入口，比如index.html+app.js是首页的入口，somepage.html+somepage.js是另一个页面的入口。打包的时候需要将这些页面都作为入口去打包，对服务器而言，用户访问哪个url就返回哪些对应的html+js文件。

请问，实际项目中，哪种方案比较合理啊？或者，还有更好的做法？

多谢指点。

Answer 1

你说的1适合单页面应用，2适合多页面应用。

Answer 2

react-router?

Answer 3

其实很多项目多页更有优势，比如按多页来划分功能有效的避免代码都耦合和降低项目复杂度等。
你可以看看这个模板webpack-multiple-page-boilerplate，使用了webpack多页面配置，可以抽取公共模块，也避免了使用react-router。