title: Components not re-rendering on route change - React HashRouter
body: <p>I've got a problem with <code>react</code> and <code>react-router</code>.
  When I click on a link (in my example <code>contact</code> in <code>Footer.js</code>), the url changes, but the desired component <code>Location</code> is not shown. When I refresh the site then, the correct component is displayed.</p>
  
  <p><strong>App.js:</strong></p>
  
  <pre><code>import React, { Component } from 'react';
  import { BrowserRouter as Router, HashRouter, Route, Link } from 'react-router-dom';
  import 'bootstrap/dist/css/bootstrap.css';
  import Footer from './Footer.js';
  import Navigation from './Navigation.js';
  import Background from './Background.js';
  import Home from './Home.js';
  import Products from './Products.js';
  import Industries from './Industries.js';
  import Partner from './Partner.js';
  import Location from './Location.js';
  import MeetUs from './MeetUs.js';
  import ScrollUp from './ScrollUp.js';
  import Divider from './Divider.js';
  import Country from './Country.js';
  import Language from './Language.js';
  import Waypoint from 'react-waypoint';
  import $ from "jquery";
  
  class App extends Component {
  
    constructor(props) {
      super(props);
      this.state = {
        currentLanguage: 'en',
        currentBU: '',
        currentIndustry: '',
        showMainProductGroups: false,
        currentCountry: 'group',
        countryObject: Country['group'],
        contacts: [],
        mainProductGroups: [],
      };
    }
  
    handleCountryChange() {
    //...
    }
  
    handleLanguageChange() {
    //...
    }
  
    handleBUChange() {
    //...
    }
  
    render() {
      const routes = [
        { 
          path: '/',
          exact: true,
          components: () =&gt; 
            &lt;div&gt;
              &lt;Home key="home" currentLanguage={this.state.currentLanguage} /&gt;
            &lt;/div&gt;,
        },
        { 
          path: '/contact',
          exact: true,
          components: () =&gt; &lt;Location key="locations" currentLanguage={this.state.currentLanguage} country={this.state.countryObject} contacts= {this.state.contacts} onCountryChange={this.handleCountryChange.bind(this)} /&gt;
        },
      ]
      return (
        &lt;HashRouter&gt;
      &lt;div&gt;
        &lt;Background /&gt;
        &lt;div id="wrap"&gt;
          &lt;div id="main" className="container clear-top marginBottom50px"&gt;
              &lt;div id="content"&gt;
                &lt;Navigation key="navBar" currentLanguage={this.state.currentLanguage} onLanguageChange={this.handleLanguageChange.bind(this)} onBUChange={this.handleBUChange.bind(this)} onCountryChange={this.handleCountryChange.bind(this)} /&gt;
                {
                  routes.map((route, index) =&gt; (
                  &lt;Route key={index} path={route.path} exact={route.exact} component={route.components} /&gt;
                ))
                }
              &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;Footer key="footer" currentLanguage={this.state.currentLanguage} /&gt;
        &lt;ScrollUp key="scrollUp" /&gt;
      &lt;/div&gt;
    &lt;/HashRouter&gt;
      );
    }
  }
  
  export default App;
  </code></pre>
  
  <p><strong>Home.js:</strong></p>
  
  <pre><code>import React, { Component } from 'react';
  import $ from "jquery";
  import {  Link } from 'react-router-dom';
  import {withRouter} from 'react-router';
  import Language from './Language.js';
  import locations from './locations.jpg';
  import locationLegend from './locationLegend.jpg';
  require('bootstrap')
  
  class Home extends Component {
      constructor(props) {
          super(props);
          this.state = {
          };
      }
  
      render() {
          return (
              &lt;div className="container marginTop50px marginBottom50px area"&gt;
                  &lt;div className="row"&gt;
                      &lt;div className="col-12 text-center animDelay2 fadeInDown animated"&gt;
                          &lt;h1&gt;International Distribution of Specialty Chemicals&lt;/h1&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div className="row marginTop25px"&gt;
                      &lt;div className="col-12 text-center animDelay2 fadeInUp animated"&gt;
                          {Language[this.props.currentLanguage].homeStartText}
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div className="row marginTop25px"&gt;
                      &lt;div className="col-12 text-center"&gt;
                          &lt;img src={locations} className="img-fluid" alt="Locations" /&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div className="row marginTop25px"&gt;
                      &lt;div className="col-12 text-center"&gt;
                          &lt;img src={locationLegend} className="img-fluid" alt="Locations" /&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          );
      }
  }
  
  export default withRouter(Home);
  </code></pre>
  
  <p><strong>Location.js:</strong></p>
  
  <pre><code>import React, { Component } from 'react';
  import $ from "jquery";
  import { Link } from 'react-router-dom';
  import Language from './Language.js';
  import Country from './Country.js';
  import ContactPerson from './ContactPerson.js';
  import locations from './locations.png';
  import phone from './phoneBlack.svg';
  import fax from './faxBlack.svg';
  import email from './emailBlack.svg';
  import {withRouter} from 'react-router';
  require('bootstrap');
  
  class Location extends Component {
      constructor(props) {
          super(props);
          this.state = {
          };
      }
  
      componentDidUpdate(prevProps, prevState, snapshot) {
          console.log('Country change:' + this.props.country.key);
          $('#selectCountry').val(this.props.country.key); //name['en']
      }
  
      onCountryChange() {
          let countryName = this.refs.country.value;
          this.props.onCountryChange(countryName);
      }
  
      render() {
          return (
              &lt;div className="container marginTop50px marginBottom50px area" id="locations"&gt;
                  &lt;div className="row"&gt;
                      &lt;div className="col-12 text-center"&gt;
                          &lt;h2&gt;{Language[this.props.currentLanguage].locations}&lt;/h2&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div className="row marginTop25px"&gt;
                      &lt;div className="col-12 text-center"&gt;
                          &lt;div className="form-group"&gt;
                              &lt;select id="selectCountry" className="form-control" ref="country" onChange={this.onCountryChange.bind(this)}&gt;
                                  &lt;option defaultValue&gt;{Language[this.props.currentLanguage].selectLocation.toUpperCase()}&lt;/option&gt;
                                  {
                                      Object.keys(Country).map((countryKey) =&gt; {
                                          const country = Country[countryKey];
                                          return (
                                              &lt;option value={countryKey} key={"loc" + countryKey}&gt;{country.name[this.props.currentLanguage].toUpperCase()}&lt;/option&gt;
                                          );
                                      })
                                  }
                              &lt;/select&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div className="row marginTop25px"&gt;
                      &lt;div className="col-12 text-center"&gt;
                          {this.props.country.name[this.props.currentLanguage].toUpperCase()}
                          &lt;br /&gt;
                          &lt;address&gt;
                              &lt;span dangerouslySetInnerHTML={{__html: this.props.country.address}}&gt;&lt;/span&gt;
                              &lt;br /&gt;
                              &lt;br /&gt;
                              &lt;img src={phone} alt="Anrufen" className="phoneMain"&gt;&lt;/img&gt;&lt;span&gt; &lt;/span&gt;
                              &lt;a href={this.props.country.phoneHTML}&gt;{this.props.country.phone}&lt;/a&gt;
                              &lt;br /&gt;
                              &lt;img src={fax} alt="Fax" className="phoneMain"&gt;&lt;/img&gt;&lt;span&gt; &lt;/span&gt;
                              &lt;a href={this.props.country.faxHTML}&gt;{this.props.country.fax}&lt;/a&gt;
                              &lt;br /&gt;
                              &lt;img src={email} alt="Email" className="emailMain"&gt;&lt;/img&gt;&lt;span&gt; &lt;/span&gt;
                              &lt;a href={"mailto://" + this.props.country.email}&gt;{this.props.country.email}&lt;/a&gt;
                          &lt;/address&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div className="row marginTop25px"&gt;
                      &lt;div className="col-12 text-center"&gt;
                          {Language[this.props.currentLanguage].vatRegistrationNumber + ": " + this.props.country.vatNo}
                          &lt;br /&gt;
                          {Language[this.props.currentLanguage].registrationOffice + ": "}
                          &lt;span dangerouslySetInnerHTML={{__html: this.props.country.registrationOffice}}&gt;&lt;/span&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div className="row marginTop50px"&gt;
                      &lt;div className="col-12 text-center"&gt;
                          &lt;h3&gt;{Language[this.props.currentLanguage].contact}&lt;/h3&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div className="row"&gt;
  
                          {
                              this.props.contacts.map((contact) =&gt; {
                                  return (
                                      &lt;div className="col-12 col-sm-12 col-md-12 col-lg-6 text-center"&gt;
                                          &lt;ContactPerson contact={contact} key={"contact" + contact.id} /&gt;
                                      &lt;/div&gt;
                                  );
                              })
                          }
                  &lt;/div&gt;
              &lt;/div&gt;
          );
      }
  }
  
  export default withRouter(Location);
  </code></pre>
  
  <p><strong>Footer.js:</strong></p>
  
  <pre><code>import React, { Component } from 'react';
  import $ from "jquery";
  import {  Link } from 'react-router-dom';
  import {withRouter} from 'react-router';
  import Language from './Language.js';
  import phone from './phoneWhite.svg';
  import fax from './faxWhite.svg';
  require('bootstrap');
  
  class Footer extends Component {
      constructor(props) {
          super(props);
          this.state = {
          };
      }
  
      render() {
          return (
              &lt;footer className="footer"&gt;
                  &lt;div className="container-fluid borderTop1px footerLayout"&gt;
                      &lt;div className="row"&gt;
                          &lt;div className="col-3"&gt;
                              &lt;address&gt;
                                  &lt;small&gt;
                                      Some text
                                  &lt;/small&gt;
                              &lt;/address&gt;
                          &lt;/div&gt;
                          &lt;div className="col-6 text-center"&gt;
                              &lt;div className="row"&gt;
                                  &lt;div className="col-12 col-sm-12 col-md-12 col-lg-3 text-center"&gt;
                                      &lt;a href="https://download.group.com" className="nav-link footerLink" target="_self"&gt;&lt;small&gt;{Language[this.props.currentLanguage].download}&lt;/small&gt;&lt;/a&gt;
                                  &lt;/div&gt;
                                  &lt;div className="col-12 col-sm-12 col-md-12 col-lg-3 text-center"&gt;
                                      &lt;Link to="/imprint" className="nav-link footerLink"&gt;&lt;small&gt;{Language[this.props.currentLanguage].imprint}&lt;/small&gt;&lt;/Link&gt;
                                  &lt;/div&gt;
                                  &lt;div className="col-12 col-sm-12 col-md-12 col-lg-3 text-center"&gt;
                                      &lt;Link to="/contact" className="nav-link footerLink"&gt;&lt;small&gt;{Language[this.props.currentLanguage].contact}&lt;/small&gt;&lt;/Link&gt;
                                  &lt;/div&gt;
                                  &lt;div className="col-12 col-sm-12 col-md-12 col-lg-3 text-center"&gt;
                                      &lt;Link to="/termsAndConditions" className="nav-link footerLink"&gt;&lt;small&gt;{Language[this.props.currentLanguage].termsAndConditions}&lt;/small&gt;&lt;/Link&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div className="col-3"&gt;
                              &lt;ul className="list-inline"&gt;
                                  &lt;li&gt;
                                      &lt;img src={phone} alt="Anrufen" className="phone"&gt;&lt;/img&gt; &lt;small&gt;&lt;a className="footerLink" href="tel:+49"&gt;+49&lt;/a&gt;&lt;/small&gt;
                                  &lt;/li&gt;
                                  &lt;li&gt;
                                      &lt;img src={fax} alt="Fax" className="phone"&gt;&lt;/img&gt; &lt;small&gt;&lt;a className="footerLink" href="tel:+49"&gt;+49&lt;/a&gt;&lt;/small&gt;
                                  &lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/footer&gt;
          );
      }
  }
  
  export default withRouter(Footer);
  </code></pre>
  
  <p>What I'm doing wrong? Why it is not working, when I click on a link?</p>