这更多是关于react的架构问题而不是特定问题，但是使用布局组件和基于 url 呈现的几个子组件管理状态/props的最佳实践被认为是什么？

注意：我知道有人问过类似的问题，但这有点不同。[如何使用 React-Router 根据 URL / 路径更新 ReactJS 组件

假设我有类似以下代码的内容：个人资料页面（主布局视图），带有个人资料子部分（设置、首选项、帐户详细信息等）的导航链接，以及呈现每个子部分的主面板.

所以目前我会有这样的东西：我的路由器 routes.js

<Router history={browserHistory}>
  <Route path='/profile' component={Profile} >
    <IndexRoute component={Summary} />
    <Route path='/profile/settings' component={Settings} />
    <Route path='/profile/account' component={Account} />
    <Route path='/profile/preferences' component={Preferences} />
  </Route>
</Router>

以及我的个人资料布局组件profile.js的精简版

class Profile extends React.Component {

  constructor(props) {
    super(props)
  }

  render(){

    let pathName = this.props.location.pathname;

    return(
      <div className='container profile-page'>
        <div className='side-nav'>
          <ul>
            <li><Link to='/profile'>Summary</Link></li>
            <li><Link to='/profile/settings'>Settings</Link></li>
            <li><Link to='/profile/account'>My Account</Link></li>
            <li><Link to='/profile/preferences'>Preferences</Link></li>
          </ul>
        </div>
        <div className='main-content'>
         {this.props.children}
        </div>
      </div>
    )
  }
}

export default Profile;

所以这种作品。子组件将根据 url 呈现。但是我该如何管理 state 和 props 呢？按照我理解 React 和 Flux 的方式，我希望 Profile 组件管理状态并监听我的商店的变化，并将这些变化传播给它的子组件。这个对吗？

我的问题是似乎没有一种直观的方式将 props 传递给 this.props.children 渲染的组件，这让我觉得我当前的架构和/或对通量的理解不正确。

一些指导将不胜感激。