title: how to debug react router not loading component on url change
body: <p>I'm using react-router-dom version 4.3.1
  Upon clicking the link, the URL changes but React Component is not rendered (in fact the debugger does not stop at any point in my code).
  I have already tried using <code>withComponent</code> and <code>exact</code> keywords, but that doesn't work as well. It is mentioned in the following two solutions:
  <a href="https://stackoverflow.com/questions/43351752/react-router-changes-url-but-not-view">React router changes url but not view</a> and
  <a href="https://stackoverflow.com/questions/44328600/react-route-using-browserhistory-changes-url-but-nothing-happens">react route using browserhistory changes url but nothing happens</a>
  The only time it works is when the page is refreshed using the refresh button.
  I'm loading the router in the <code>root</code> element in <code>index.js</code>:</p>
  
  <p><code>ReactDOM.render(&lt;AppRouter /&gt;, document.getElementById("root"));</code></p>
  
  <p>AppRouter has this code:</p>
  
  <pre><code>export const AppRouter = () =&gt; {
      return (
          &lt;&gt;
          &lt;HashRouter&gt;
          &lt;div&gt;
          &lt;Switch&gt;
          &lt;Route path="/page1" component={Page1} /&gt;
          &lt;Route path="/page1" component={withRouter(Page2)} /&gt; //still doesn't work
          &lt;Route exact path="/" component={Home} /&gt;
          &lt;/Switch&gt;
          &lt;/div&gt;
          &lt;/HashRouter&gt;
          &lt;/&gt;
          )}
  </code></pre>
  
  <p>Then in my page I have:</p>
  
  <pre><code>&lt;Router&gt;
          &lt;div&gt;
          &lt;Link to={'/page1'}&gt;Page 1&lt;/Link&gt;
          &lt;Link to={'/page2'}&gt;Page 2&lt;/Link&gt;
          &lt;/div&gt;
  &lt;/Router&gt;
  </code></pre>
  
  <p>What's interesting is that it was working but after I shuffled around load order of my components, it stopped working. How can I debug this? Thanks.</p>