title: Changing components based on url with react router
body: <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>