反应路由器不渲染组件

Question

Here is the code from my 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>
    )
  }

And from 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>
    );
  }
}

The problem I'm having is that the Container component is not being rendered and subsequently none of it's children are either. If I remove the Container component then the VideoConference component loads without a problem. Therefore I am led to assume the issue lies within the way the Container component is being rendered. Appreciate any help.

Answer 1

I never see this component instantiation inside of router

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

Router component is top-level component, that require only props from url, try to do this

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

Otherwise look like you have some problems with application logic.

Try to do this one:

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

and try to access application properties from Container using static instance. Otherwise you can assign something like 'context' object, that will be accessible to all components.

Answer 2

If you're trying to pass props to child routes, you can do it this way from the top level component.

Change

{this.props.children}

to

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

But note that this prop will be passed to all children