一度グローバル要素をレンダリングする

Question

私のウェブサイトにはナビゲーションとコンテンツという2つの要素があります。私はすべての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> 
     ); 
     } 
    } 

のような子どもたちのコンポーネントを追加します