Dies ist eher eine architektonische Frage in Bezug auf das Reagieren als ein bestimmtes Problem. Was wird jedoch als bewährte Methode für das Verwalten von Status / Requisiten mit einer Layoutkomponente und mehreren untergeordneten Komponenten angesehen, die auf der Basis der URL gerendert werden?

Hinweis: Mir ist bewusst, dass ähnliche Fragen gestellt wurden, aber das ist ein bisschen anders. Wie aktualisiere ich die ReactJS-Komponente basierend auf URL / Pfad mit React-Router?

Sagen wir, ich habe so etwas wie den folgenden Code: Eine Profilseite (Hauptlayout-Ansicht) mit Navigationslinks für Profil-Unterabschnitte (Einstellungen, Einstellungen, Kontodetails usw.) und ein Hauptfenster, in dem sich jeder Unterabschnitt befindet gerendert.

So momentan hätte ich so etwas: meinen Router 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>

und eine abgespeckte Version meiner Profillayoutkomponente 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;

So funktioniert diese Art von. Die untergeordneten Komponenten werden basierend auf der URL gerendert. Aber wie verwalte ich dann Zustand und Requisiten? So wie ich React und Flux verstehe, möchte ich, dass die Profilkomponente den Status verwaltet und Änderungen in meinen Stores überwacht und diese Änderungen an die untergeordneten Elemente weitergibt. Ist das richtig

Mein Problem ist, dass es anscheinend keinen intuitiven Weg gibt, Requisiten an von this.props.children gerenderte Komponenten weiterzugeben, so dass ich das Gefühl habe, dass meine aktuelle Architektur und / oder mein Verständnis des Flusses nicht korrekt sind.

Ein bisschen Anleitung wäre sehr dankbar.