title: Header/Footer navigation react-router-dom and antd menu and router problems
body: <p>I am working on a reactjs application - and I've created two menus - header/footer -- I've noticed a bug on the "active" state when I navigate on the pages.</p>
  
  <p>// Current problems</p>
  
  <ol>
  <li>When arriving on home page the home link is active on the header menu, but when clicking on the footer menu - privacy - the privacy link is active but the header links are also still active when they should be deactived.</li>
  <li>Also when going to a page that doesn't exist like typing /home2 -- it should bounce to the Error page but it doesn't - what is interfering with this in the router?</li>
  </ol>
  
  <p>// Land on home page -- home page is active
  <a href="https://i.stack.imgur.com/28JrB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/28JrB.png" alt="enter image description here"></a></p>
  
  <p>// Land on privacy - privacy is active in the footer - but the home page in the header is also still active.</p>
  
  <p><a href="https://i.stack.imgur.com/oyFD2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oyFD2.png" alt="enter image description here"></a></p>
  
  <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'
  
  const SubMenu = Menu.SubMenu;
  const MenuItemGroup = Menu.ItemGroup;
  
  // this is a class because it needs state
  class Header extends Component {
  
    state = {
      current: 'home',
    }
  
    handleClick = (e) =&gt; {
      console.log('click ', e);
      this.setState({
        current: e.key,
      });
    }
  
    componentDidMount() {    
  
    }
  
    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;
      )
    }
  }
  
  export default Header
  </code></pre>
  
  <p>// Footer.js</p>
  
  <pre><code>import React, { Component } from 'react'
  import { Link } from 'react-router-dom'
  import { Row, Col, Menu, Icon, Alert } from 'antd'
  
  const SubMenu = Menu.SubMenu;
  const MenuItemGroup = Menu.ItemGroup;
  
  // this is a class because it needs state
  class Footer extends Component {
  
    state = {
      current: 'home',
    }
  
    handleClick = (e) =&gt; {
      console.log('click ', e);
      this.setState({
        current: e.key,
      });
    }
  
    componentDidMount() {    
  
    }
  
    render() {
      return (
        &lt;Menu
          onClick={this.handleClick}
          selectedKeys={[this.state.current]}
          mode="horizontal"
        &gt;
          &lt;Menu.Item key="about"&gt;
            &lt;Link to="/about" rel="noopener noreferrer"&gt;About&lt;/Link&gt;
          &lt;/Menu.Item&gt;
          &lt;Menu.Item key="terms"&gt;
            &lt;Link to="/terms" rel="noopener noreferrer"&gt;Terms of Service&lt;/Link&gt;
          &lt;/Menu.Item&gt;
          &lt;Menu.Item key="privacy"&gt;
            &lt;Link to="/privacy" rel="noopener noreferrer"&gt;Privacy Policy&lt;/Link&gt;
          &lt;/Menu.Item&gt;
        &lt;/Menu&gt;
      )
    }
  }
  
  export default Footer
  </code></pre>
  
  <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 {
    render () {
      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 /&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 path='/' component={Login} /&gt;
                  &lt;Route component={Error} /&gt;
                &lt;/Switch&gt;
                &lt;Footer transparent /&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/Router&gt;
        &lt;/Provider&gt;
      )
    }
  }
  
  export default Routes
  </code></pre>