渲染全局元素一次

Question

我的网站上有两个元素 - 导航和内容。我想更改每个URL更改（reactjs路由器）上的内容，但我希望导航保持不变。

我也想在首先被调用的默认控制器中创建导航，而不用稍后重新渲染。

这可能吗？我的意思是，据我所知，进入另一条路线后，我获得了完全不同的渲染效果，导致我的导航消失。

var AppController = React.createClass({ 
    render: function() { 
     if (this.state.userRole != undefined) { 
     if (this.state.userRole == 'user') { 
      return React.createElement('div', {}, 
       React.createElement('userNavigation'), 
       React.createElement(UserContent) 
      ); 
     } else { 
      return React.createElement('div', {}, 
       React.createElement('adminNavigation'), // I dont want it to change after using Link 
       React.createElement(AdminContent) // I want only this one to change 
      ); 
     } 
     } 
    } 
}); 

Answer 1

“/”将默认路由到根组件。在根组件中呈现Navigator和Children的基础子URL。例如登录或博客页面。

<Router history={browserHistory}> 
     <Route path="/" component={Root}> 
       <Route path="login" component={LoginPage} />  
       <Route path="blog" component={BlogPage} /> 
    </Route> 
</Router> 

和根组件添加孩子的组件如

export default class Root extends React.Component { 
     render() {   
     return (
      <div className="container-fluid">   
       <div className="row"> 
       // Navbar start 
        <nav className="navbar navbar-default navbar-fixed-top"> 
         <div className="container"> 

         <div className="navbar-header"> 
          <button type="button" className="navbar-toggle " data-toggle="collapse" data-target="#myNavbar"> 
          <span className="icon-bar"></span> 
          <span className="icon-bar"></span> 
          <span className="icon-bar"></span>       
          </button> 
         </div> 
         <div className="collapse navbar-collapse" id="myNavbar"> 
          <ul className="nav navbar-nav navbar-right"> 
          <li><Link to={logPath}>{logText}</Link></li> 
          <li><Link to="/blog">Blogs</Link></li> 
          <li><Link to="/warrior">Warriers</Link></li> 
          <li><Link to="/about">About</Link></li> 
          </ul> 
         </div> 
         </div> 
        </nav> 
        //Navbar end 
       </div> 
     // Page content 
     <div className="row jumbotron text-center"> 
        <div className="col-sm-9 text-center"> 
          {this.props.children} // based on URL children content changed 
        </div> 
      </div> 
    //Page Content end 
      </div> 
     ); 
     } 
    }