React router nav bar example

Question

I am a beginner in React JS and would like to develop a react router based navigation for my Dashboard. The mockup is as follows:

My app.js code which I created

Answer 1

Yes, Daniel is correct, but to expand upon his answer, your primary app component would need to have a navbar component within it. That way, when you render the primary app (any page under the '/' path), it would also display the navbar. I am guessing that you wouldn't want your login page to display the navbar, so that shouldn't be a nested component, and should instead be by itself. So your routes would end up looking something like this:

And the other components would look something like this:

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