我是React JS的初学者,并且想为我的仪表板开发基于React Router的导航。样机如下:
我创建的用于尝试路由的app.js代码如下:
import React from 'react' import { render } from 'react-dom' import { Router, Route, Link } from 'react-router' import Login from './components/Login.js'; const App = React.createClass({ render() { return ( <div> <h1>App</h1> <ul> <li><Link to="/login">Login</Link></li> <li><Link to="/inbox">Inbox</Link></li> </ul> {this.props.children} </div> ) } }) render(( <li> <Router> <Route path="/" component={App}> <Route path="login" component={Login} /> </Route> </Router> </li> ), document.getElementById('placeholder'))
如何创建模型中所示的导航?
是的,丹尼尔是正确的,但是要扩展他的答案,您的主应用程序组件将需要具有一个导航栏组件。这样,当渲染主应用程序(“ /”路径下的任何页面)时,它还将显示导航栏。我猜想您不希望您的登录页面显示导航栏,因此它不应该是嵌套的组件,而应该是单独的。因此,您的路线最终看起来像这样:
<Router> <Route path="/" component={App}> <Route path="page1" component={Page1} /> <Route path="page2" component={Page2} /> </Route> <Route path="/login" component={Login} /> </Router>
其他组件如下所示:
var NavBar = React.createClass({ render() { return ( <div> <ul> <a onClick={() => history.push('page1') }>Page 1</a> <a onClick={() => history.push('page2') }>Page 2</a> </ul> </div> ) } }); var App = React.createClass({ render() { return ( <div> <NavBar /> <div>Other Content</div> {this.props.children} </div> ) } });