Changing components based on url with react router
<p>This is more of an architectural question regarding react than a specific issue, but what is considered best practice for managing state/props with a layout component and a several child components which are rendered based on the url?</p>

<p>Note: I'm aware that similar questions have been asked, but this is a little bit different. [<a href="https://stackoverflow.com/questions/26350107/how-to-update-reactjs-component-based-on-url-path-with-react-router]">How to update ReactJS component based on URL / path with React-Router</a></p>

<p>Lets say I have something like the following code: A profile page (main layout view) with navigation links for profile sub-sections (settings, preferences, account details, etc), and a main panel where each of the sub-section is rendered. </p>

<p>So currently I would have something like this:
my router
<strong>routes.js</strong></p>

<pre><code>&lt;Router history={browserHistory}&gt;
  &lt;Route path='/profile' component={Profile} &gt;
    &lt;IndexRoute component={Summary} /&gt;
    &lt;Route path='/profile/settings' component={Settings} /&gt;
    &lt;Route path='/profile/account' component={Account} /&gt;
    &lt;Route path='/profile/preferences' component={Preferences} /&gt;
  &lt;/Route&gt;
&lt;/Router&gt;
</code></pre>

<p>and a stripped down version of my profile layout component
<strong>profile.js</strong></p>

<pre><code>class Profile extends React.Component {

  constructor(props) {
    super(props)
  }

  render(){

    let pathName = this.props.location.pathname;

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

export default Profile;
</code></pre>

<p>So this kind of works. The child components will render based on the url. But then how do I manage state and props? The way I understand React and Flux, I want the Profile component to manage state and listen to changes on my stores, and to propagate those changes to its children. Is this correct? </p>

<p>My problem is that there doesn't seem to be an intuitive way to pass props to components rendered by this.props.children, which makes me feel like my current architecture and/or understanding of flux is not correct. </p>

<p>A bit of guidance would be much appreciated. </p>