我是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 (
      

        
App
        

          
Login
          
Inbox
        
        {this.props.children}
      
    )
  }
})


render((
  

  
    
      
    
  
  
), document.getElementById('placeholder'))

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

1> 小智..：

---

是的,Daniel是正确的,但是为了扩展他的答案,您的主要应用程序组件需要在其中包含导航栏组件.这样,当您渲染主应用程序('/'路径下的任何页面)时,它也会显示导航栏.我猜您不希望您的登录页面显示导航栏,因此不应该是嵌套组件,而应该是它自己.所以你的路线最终会看起来像这样:

其他组件看起来像这样:

var NavBar = React.createClass({
  render() {
    return (
      

        

           history.push('page1') }>Page 1
           history.push('page2') }>Page 2
        
      
    )
  }
});

var App = React.createClass({
  render() {
    return (
      

        
        
Other Content
        {this.props.children}
      
    )
  }
});

---

为什么使用history.push而不是？

2> Chris..：

---

注意接受完全没问题 - 但是想添加一个版本4示例,因为它们足够不同.

Nav.js

  import React from 'react';
  import { Link } from 'react-router';

  export default class Nav extends React.Component {
    render() {    
      return (
        
      );
    }
  }

App.js

  import React from 'react';
  import { Link, Switch, Route } from 'react-router';
  import Nav from './nav';
  import Page1 from './page1';
  import Page2 from './page2';
  import Page3 from './page3';

  export default class App extends React.Component {
    render() {    
      return (
        

          
            

              
          
        
      );
    }
  }

或者,如果您想要更加动态的导航,您可以查看优秀的v4文档:https://reacttraining.com/react-router/web/example/sidebar

---

如果您有登录页面,这如何工作？可能不希望导航栏出现在登录页面上.有没有解决的办法？

---

当前的v4路由器只允许一个孩子.我通过使用单个