Question

我的网站上有两个元素 - 导航和内容。我想更改每个网址更改的内容（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>

Root组件添加子组件

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

渲染全局元素一次

1 个答案: