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

Note The accepted is perfectly fine - but wanted to add a version4 example because they are different enough.

Nav.js

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

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

          

            
              
            

            

              

                

                  Link 1
                
                

                  Link 2
                
                

                  Link 3
                
              
            
          
        
      );
    }
  }

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 (
        

          
            

              

              
                
                
                
                
                
              
            
          
        
      );
    }
  }

Alternatively, if you want a more dynamic nav, you can look at the excellent v4 docs: https://reacttraining.com/react-router/web/example/sidebar

Edit

A few people have asked about a page without the Nav, such as a login page. I typically approach it with a wrapper Route component

  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';

  const NavRoute = ({exact, path, component: Component}) => (
     (
      

        

        
      
    )}/>
  )

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

          
              
                
                
                
                
                
              
          
        
      );
    }
  }