title: reactjs header/footer menu handling -- current page and active states
body: <p>I am working on a reactjs application -- the header menu is an antd menu and the footer links are NavLinks.. my issue stems from setting the menu's properly -- I've tried to feed the CURRENT page from the routing level -- and feed it into the header/footer components.</p>
  
  <p>The application is not stable -- I refresh the page on the Home page its active -- if I refresh the page on the terms its not selecting the home link -- but the links in the footer are not set to select -- and the communication between the components isn't there -- Account is selected if I click on it - then move to footer links etc..</p>
  
  <p>is this something that should or could get handled by the redux store - if so how to implement this? Properly?</p>
  
  <p>Any suggestions on this?</p>
  
  <pre><code>const mapStateToProps = (state) =&gt; {
    return {
      current_page: state.current
    }
  }
  
  const { bool, string, func } = React.PropTypes
  Header.propTypes = {
    current_page: string
  }
  
  export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Header)) 
  </code></pre>
  
  <p>?</p>
  
  <p>code currently looks like this.
  <a href="http://jsfiddle.net/0ht35rpb/105/" rel="nofollow noreferrer">http://jsfiddle.net/0ht35rpb/105/</a></p>
  
  <p>// router.js</p>
  
  <pre><code>import React, { Component } from 'react'
  import { BrowserRouter as Router, Route, Redirect, Switch } from 'react-router-dom'
  import createBrowserHistory from 'history/createBrowserHistory'
  import { Provider } from 'react-redux'
  import { createStore, compose } from 'redux'
  
  // components
  import Login from './components/Login/Login'
  
  import Home from './components/Home/Home'
  import Account from './components/Account/Account'
  
  import About from './components/About/About'
  import Terms from './components/Terms/Terms'
  import Privacy from './components/Privacy/Privacy'
  
  import Error from './components/Error/Error'
  
  import Header from './components/Header/Header'
  import Footer from './components/Footer/Footer'
  
  const history = createBrowserHistory()
  
  //const store = createStore(rootReducer, compose(
  const store = createStore(compose(
    typeof window === 'object' &amp;&amp; typeof window.devToolsExtension !== 'undefined' ? window.devToolsExtension() : (f) =&gt; f
    )
  )
  
  // we can pass the lang files as props to the routes
  // we should have a nested route inside service here to show the other services page
  
  class Routes extends Component {
  
  
    constructor (props) {
      super(props)
      this.state = {
        current: window.location.pathname.substr(1),
      }
    }
  
    render () {
      const loggedIn = 1;
      const current = this.state.current;
  
      return (
        &lt;Provider store={store}&gt;
          &lt;Router history={history}&gt;
            &lt;div className='off-canvas-wrap' data-offcanvas&gt;
              &lt;div className='inner-wrap'&gt;
                &lt;Header transparent current={current} /&gt;
                &lt;Switch&gt;
                  &lt;Route path='/home' component={Home} /&gt;
                  &lt;Route path='/account' component={Account} /&gt;
  
                  &lt;Route path='/about' component={About} /&gt;
                  &lt;Route path='/terms' component={Terms} /&gt;
                  &lt;Route path='/privacy' component={Privacy} /&gt;
  
                  &lt;Route path='/login' component={Login} /&gt;
  
                  &lt;Route exact path="/" render={() =&gt; ( loggedIn ? ( &lt;Home/&gt; ) : ( &lt;Redirect to="/login"/&gt; ) )} /&gt;
  
                  &lt;Route component={Error} /&gt;
                &lt;/Switch&gt;
                &lt;Footer transparent current={current} /&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/Router&gt;
        &lt;/Provider&gt;
      )
    }
  }
  
  export default Routes
  </code></pre>
  
  <p>// Header.js</p>
  
  <pre><code>import React, { Component } from 'react'
  import { Link } from 'react-router-dom'
  import { Row, Col, Menu, Icon, Alert } from 'antd'
  
  // assets
  //import LogoImage from '../../../img/-logo_red.gif'
  
  // css
  import './header.scss'
  
  const SubMenu = Menu.SubMenu;
  const MenuItemGroup = Menu.ItemGroup;
  
  // this is a class because it needs state
  class Header extends Component {
  
    constructor (props) {
      super(props)
      console.log(this.props.current)
      this.state = {
        isHamburgerOpen: false,
        current: this.props.current,
      }
      this.toggleHamburgerIcon = this.toggleHamburgerIcon.bind(this)
    }
  
    toggleHamburgerIcon () {
      this.setState(prevState =&gt; ({
        isHamburgerOpen: !prevState.isHamburgerOpen
      }))
    }
  
    handleClick = (e) =&gt; {
      console.log('click ', e);
      this.setState({
        current: e.key,
      });
    }
  
    componentDidMount() {    
      console.log('did mount')
      // window.location.pathname.substr(1)
    }
  
    /*
    render() {
      return (
        &lt;Menu
          onClick={this.handleClick}
          selectedKeys={[this.state.current]}
          mode="horizontal"
        &gt;
          &lt;Menu.Item key="home"&gt;
            &lt;Link to="/home" rel="noopener noreferrer"&gt;Home&lt;/Link&gt;
          &lt;/Menu.Item&gt;
          &lt;Menu.Item key="account"&gt;
            &lt;Link to="/account" rel="noopener noreferrer"&gt;Account&lt;/Link&gt;
          &lt;/Menu.Item&gt;
        &lt;/Menu&gt;
      )
    }
    */
  
  
    render () {
      console.log('this.state', this.state)
      console.log('this.props.current', this.props.current)
  
      return (
        &lt;div&gt;
  
          &lt;nav className={`HeaderLandingNavOffcanvas ${this.state.isHamburgerOpen ? 'show' : ''}`}&gt;
            &lt;h1 className='display-none nocontent'&gt;Site navigation&lt;/h1&gt;
            &lt;i className='anticon anticon-close closeOffsiteMenu' onClick={this.toggleHamburgerIcon}/&gt;
            &lt;div className='row grid__row--offset--30'&gt;
              &lt;div className='small-58 small-centered columns'&gt;
                &lt;Menu
                     mode='inline'
                     onClick={this.handleClick}
                     selectedKeys={[this.state.current]}
                  &gt;
                    &lt;Menu.Item key="home" className='menu-gtm-service'&gt;
                      &lt;Link to="/home" rel="noopener noreferrer"&gt;
                        Home
                      &lt;/Link&gt;
                    &lt;/Menu.Item&gt;
                    &lt;Menu.Item key="account" className='menu-gtm-service'&gt;
                      &lt;Link to="/account" rel="noopener noreferrer"&gt;
                        Account
                      &lt;/Link&gt;
                    &lt;/Menu.Item&gt;
                  &lt;/Menu&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/nav&gt;
  
          {/* Large Header */}
          &lt;header className='ant-design-header transition show-for-large-up transparent'&gt;
            &lt;Row align='middle' type='flex' className='header-row-offset' style={{height: '100%'}}&gt;
              &lt;Col span={24}&gt;
                &lt;Row align='middle' type='flex' className='header-row-offset' style={{maxWidth: '1250px', marginLeft: 'auto', marginRight: 'auto'}}&gt;
                  &lt;Col xs={10} sm={6} md={6}&gt;
                    {/*
                    &lt;Link to='/'&gt;
                      &lt;img className='-logo transition' src={LogoImage} alt='logo' /&gt;
                    &lt;/Link&gt;
                    */}
                  &lt;/Col&gt;
                  &lt;Col xs={0} sm={0} md={18}&gt;
                    &lt;Menu
                      className='show-for-large-up'
                      mode='horizontal'
                      onClick={this.handleClick}
                      selectedKeys={[this.state.current]}
                      style={{ float: 'right', marginTop: '5px' }}
                    &gt;
                      &lt;Menu.Item key="home" className='menu-gtm-service'&gt;
                        &lt;Link to="/home" rel="noopener noreferrer"&gt;
                          Home
                        &lt;/Link&gt;
                      &lt;/Menu.Item&gt;
                      &lt;Menu.Item key="account" className='menu-gtm-service'&gt;
                        &lt;Link to="/account" rel="noopener noreferrer"&gt;
                          Account
                        &lt;/Link&gt;
                      &lt;/Menu.Item&gt;
                    &lt;/Menu&gt;
                  &lt;/Col&gt;
  
                  &lt;Col xs={{ span: 4, offset: 10 }} sm={{ span: 4, offset: 14 }} md={0}&gt;
                    &lt;div style={{ float: 'right', height: '50px', marginRight: '10px' }}&gt;
                      &lt;div className={`hamburger--elastic hamburger hamburger_nav_button right-off-canvas-toggle ${this.state.isHamburgerOpen ? 'is-active' : ''}`} onClick={this.toggleHamburgerIcon} style={{ marginTop: '5px' }}&gt;
                        &lt;span className='hamburger-box'&gt;
                          &lt;span className='hamburger-inner' /&gt;
                        &lt;/span&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                  &lt;/Col&gt;
                &lt;/Row&gt;
  
              &lt;/Col&gt;
            &lt;/Row&gt;
          &lt;/header&gt;
  
  
        &lt;/div&gt;
      )
    }
  
  }
  
  export default Header
  </code></pre>
  
  <p>// Footer.js</p>
  
  <pre><code>import React, { Component } from 'react'
  import { NavLink, Link } from 'react-router-dom'
  import { Row, Col, Menu, Icon, Alert } from 'antd'
  
  // css
  import './footer.scss'
  
  const SubMenu = Menu.SubMenu;
  const MenuItemGroup = Menu.ItemGroup;
  
  // this is a class because it needs state
  class Footer extends Component {
  
    componentDidMount() {    
  
    }
  
    render() {
      console.log('this.props.current footer', this.props.current)
  
      return (
        &lt;footer className='main-footer'&gt;
          &lt;ul&gt;
            &lt;li&gt;
              &lt;NavLink
                to="/about"
                activeClassName="selected"&gt;about
              &lt;/NavLink&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;NavLink
                to="/terms"
                activeClassName="selected"&gt;terms
              &lt;/NavLink&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;NavLink
                to="/privacy"
                activeClassName="selected"&gt;privacy
              &lt;/NavLink&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/footer&gt;
      )
    }
  }
  
  export default Footer
  </code></pre>