Reagieren Router nicht Bestandteil Rendering

Question

Hier ist der Code von meinem App.js

render() { 
    return (
     <Router history={hashHistory}> 
     <Route path='/' component={()=>{return <Container videoConf = {this.state.videoConferenceCapable}/>}}> 
      <IndexRoute component={SourcesContainer} /> 
      <Route path='/videoConference' component={()=>{return <VideoConference deviceID="57ab270b59edc845274aae09"/>}} /> 
     </Route> 
     </Router> 
    ) 
    } 

Und von Container.js

export default class Container extends React.Component { 

    render() { 

    const NavBar = this.props.videoConf ? <div><Nav/></div> : <span></span> 
    return (
     <div className="container"> 
     {NavBar} 
     <div> 
      {this.props.children} 
     </div> 
     </div> 
    ); 
    } 
} 

Das Problem, das ich habe, ist, dass die Container-Komponente ist nicht zu sein gerendert und anschließend auch keines seiner Kinder. Wenn ich die Container-Komponente entferne, wird die VideoConference-Komponente problemlos geladen. Daher wird davon ausgegangen, dass das Problem in der Art und Weise liegt, wie die Container-Komponente gerendert wird. Schätze jede Hilfe.

Answer 1

ich nie in der Router diese Komponente Instanziierung sehen

<Route path='/' component={()=>{return <Container videoConf = {this.state.videoConferenceCapable}/>}}> 

Router-Komponente ist Top-Level-Komponente, die nur Requisiten von URL benötigen, versuchen Sie diese

<Route path='/' component={Container}> 

Ansonsten wie Sie aussehen zu tun habe Probleme mit der Anwendungslogik.

Versuchen Sie diese zu tun:

export default Application extends React.Component{ 
static instance; 
constructor() { 
    Application.instance = this; 
} 
render(){ 
    return <Router /> 
} 
} 

und versucht, den Zugriff auf Anwendungseigenschaften von Containern mit statischer Instanz. Ansonsten können Sie etwas wie "Kontext" -Objekt zuweisen, auf das alle Komponenten zugreifen können.

Answer 2

Wenn Sie versuchen, Requisiten an untergeordnete Routen zu übergeben, können Sie dies auf der obersten Ebene der Komponente tun.

ändern

{this.props.children} 

zu

{React.cloneElement(this.props.children, { videoConf : this.state.videoConferenceCapable })} 

Aber beachten Sie, dass diese Stütze wird