React路由器不是渲染组件

React router not rendering component

本文关键字：组件 路由器 React      更新时间：2023-09-26

这是我的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>
    )
  }

和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>
    );
  }
}

我遇到的问题是容器组件没有被渲染，随后它的子组件也没有被渲染。如果我删除Container组件，那么VideoConference组件就会毫无问题地加载。因此，我认为问题在于容器组件的呈现方式。谢谢你的帮助。

我从来没有在router中看到过这个组件的实例化

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

路由器组件是顶级组件，只需要url中的props，尝试这样做

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

否则看起来你的应用程序逻辑有问题。

试着这样做:

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

并尝试使用静态实例从Container访问应用程序属性。否则，你可以分配一些类似'context'的对象，它将被所有组件访问。

如果你想把props传递给子路由，你可以在顶层组件中这样做。

改变
{this.props.children}


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

但是要注意，这个属性会传递给所有的子属性

相关文章：