Why shouldn't use component wrap a Route
2016-08-31 11-22-52 by Kamushin背景
由于我希望每个子项目管理自己的route，于是想维护一个route的component在各个子目录中，在index.js中import各个子项目的route.
以此简化index.js中的需要import的依赖数量。
react-route是如何配置规则的
举个例子：
<Router history={browserHistory}>
<Route path='/' component={Layout}>
<Route path='signup' component={SignupPage} />
</Route>
</Router>
Router组件在componentWillMount时会尝试加载children中的Route配置, 通过遍历children，找到他们的props, 然后把props加入route数组中。
也就是说Route组件实际上作为一个配置用的组件，会直接被Router读取，所以Route也没有实际意义上的render方法。
ps.这提供给我一个思路，如何一个组件的配置太过于多和复杂，那么可以搞出个专门用来做配置用的子组件，在渲染前读取子组件的配置，加载成自己的配置。这样的好处是大大提高了可读性。让配置成为声明而不是运算。
/**
* Creates and returns a routes object from the given ReactChildren. JSX
* provides a convenient way to visualize how routes in the hierarchy are
* nested.
*
* import { Route, createRoutesFromReactChildren } from 'react-router'
*
* const routes = createRoutesFromReactChildren(
* <Route component={App}>
* <Route path="home" component={Dashboard}/>
* <Route path="news" component={NewsFeed}/>
* </Route>
* )
*
* Note: This method is automatically used when you provide <Route> children
* to a <Router> component.
*/
function createRoutesFromReactChildren(children, parentRoute){...}
为什么不能用一个wrapper组件来隐藏子route的细节
有了上面的知识后，这个问题就显而易见了，因为配置是通过读取children的props来加载的。在children外包裹一层wrapper会导致读到wrapper的props。
怎么实现我想要的功能
最简单的方法就是写个函数来直接return route。这样既达到了分割的目的，也不会加入中间层。
为什么一开始会想用wrapper呢
一开始不够了解react-route的原理，以为只要能渲染出来，效果是一样的。