React Router导航栏示例

小编典典

React Router导航栏示例

reactjs

我是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'))

如何创建模型中所示的导航？

阅读 740

2020-07-22

共1个答案

小编典典

是的，丹尼尔是正确的，但是要扩展他的答案，您的主应用程序组件将需要具有一个导航栏组件。这样，当渲染主应用程序（“
/”路径下的任何页面）时，它还将显示导航栏。我猜想您不希望您的登录页面显示导航栏，因此它不应该是嵌套的组件，而应该是单独的。因此，您的路线最终看起来像这样：

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

2020-07-22