我的网站上有两个元素 - 导航和内容。我想更改每个网址更改的内容(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
);
}
}
}
});
答案 0 :(得分:0)
“/”将默认路由到根组件。在根组件中渲染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>
);
}
}