title: React useEffect is not triggering on route change
body: <p>I expect that <code>console.log('Refresh')</code> runs every time the route changes (switching from Component1 to Component2). But it's only triggering on first render. Why?</p>
  
  <p><strong><code>index.js</code></strong>:</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import App from './App';
  import { BrowserRouter } from 'react-router-dom';
  
  ReactDOM.render(&lt;BrowserRouter&gt;&lt;App /&gt;&lt;/BrowserRouter&gt;, document.getElementById('root'));
  </code></pre>
  
  <p><strong><code>App.js</code></strong>:</p>
  
  <pre><code>import React, { useEffect } from 'react';
  import { Switch, Route } from 'react-router-dom';
  import Nav from './Nav';
  import Component1 from './Component1';
  import Component2 from './Component2';
  
  const App = () =&gt; {
  
    useEffect( () =&gt; console.log('Refresh'));
  
    return (
          [&lt;Switch&gt;
              &lt;Route                            component = {Nav}/&gt;
          &lt;/Switch&gt;,
          &lt;Switch&gt;
              &lt;Route exact path = '/component1' component = {Component1}/&gt;
              &lt;Route exact path = '/component2' component = {Component2}/&gt;
          &lt;/Switch&gt;]
    );
  }
  
  export default App;
  </code></pre>
  
  <p><strong><code>Nav.js</code></strong>:</p>
  
  <pre><code>import React from 'react';
  import { Link } from 'react-router-dom';
  
  const  Nav = () =&gt; {
    return (
      &lt;div&gt;
          &lt;Link to = '/component1'&gt;Component 1&lt;/Link&gt;
          &lt;Link to = '/component2'&gt;Component 2&lt;/Link&gt;
      &lt;/div&gt;
    );
  }
  
  export default Nav;
  </code></pre>
  
  <p><strong><code>Component1.js</code></strong>: </p>
  
  <pre><code>import React from 'react';
  
  const  Component1 = () =&gt; {
  
    return (
      &lt;div&gt;
          &lt;p&gt;Hi&lt;/p&gt;
      &lt;/div&gt;
    );
  }
  
  export default Component1;
  </code></pre>
  
  <p><strong><code>Component2.js</code></strong>:</p>
  
  <pre><code>import React from 'react';
  
  const  Component2 = () =&gt; {
    return (
      &lt;div&gt;
          &lt;p&gt;Bye&lt;/p&gt;
      &lt;/div&gt;
    );
  }
  
  export default Component2;
  </code></pre>