webpack 样式分离之The root route must render a single element

公司项目使用的是webpack1，使用extract-text-webpack-plugin 插件无法将css分离出来，检查原因，发现有如下代码

<Route path="/home" component={require('react-router!./containers/home')}></Route>

经过react-router处理过的文件无法提取出样式，将代码修改为

<Route path="/home" component={require('./containers/home')}></Route>

这时css被提取出来，但是报出如下错误

查阅资料，发现问题所在

因为 module.exports 和 ES6 里的 export default 有区别。

如果是用 es6 的写法，组件都是通过 export default 导出的，那么在 getComponent 方法里面需要加入 .default。

如果是用 CommonJS 的写法，也就是通过 module.exports 导出的，那就无须加 .default 了。

修改代码后，问题解决

<Route path="/home" component={require('./containers/home').default}></Route>