我是React JS的初学者，并希望为我的仪表板开发基于路由器的导航。模型如下：
我创建的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>
)
}
});
