bad_navbar.js

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



const navMsg = ['Add Entries','Invite People', "See Who's Here", "Start The Vote"]


export default React.createClass({


  render() {
    let backMsg, fwdMsg, fwd, back
    const {pathname}= this.props.location
    const {childRoutes} = this.props.route

    switch (pathname) {
      case '/entries': fwdMsg=navMsg[1], fwd = childRoutes[1].path
        break
      case '/invites': backMsg=navMsg[0], back=childRoutes[0].path, fwdMsg=navMsg[2], fwd = childRoutes[2].path
        break
      case '/users': backMsg=navMsg[1], back=childRoutes[1].path, fwdMsg=navMsg[3], fwd = childRoutes[3].path
        break
      case '/manage': backMsg=navMsg[2], back=childRoutes[2].path
        break
    }




    return (
      <div className='is-flex' style={styles.app}>
        <div  className="navbar-left is-flex" style={styles.nav}>
          {back ?
            <Link to={back}>
              <span style={styles.links} className='icon'><i className="fa fa-chevron-left"></i></span>&nbsp;
              <span>{backMsg}</span>
            </Link>
            : null }
          <div className='is-flex' style={styles.userLogout}>
            <p>User Name</p> &nbsp; <Link  to='/' className="button is-primary">logout</Link>
          </div>
          {fwd ?
            <Link to={fwd}>
              <span>{fwdMsg}</span>&nbsp;
              <span style={styles.links} className='icon'><i className="fa fa-chevron-right"></i></span>
            </Link>
            : null }
        </div>
        <div  className='is-flex' style={styles.content}>{this.props.children}</div>
      </div>
    )
  }
})