title: react-router Link changes url but Route component doesn't render
body: <p>I've been trying to implement react-router-dom, but it seems to conflicting (potentially) with either Redux, or Redux-persist. My index.js looks like </p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import './index.css';
  import App from './App';
  import Terms from './Terms'
  import * as serviceWorker from './serviceWorker';
  import { Provider } from 'react-redux';
  import { PersistGate } from 'redux-persist/lib/integration/react';
  import { persistor, store } from './configureStore'
  import {
    BrowserRouter as Router,
    Switch,
    Route,
  } from "react-router-dom";
  
  const ReduxWrapper = () =&gt; {
      return (
          &lt;Provider store={store}&gt;
        &lt;PersistGate persistor={persistor}&gt;
          &lt;Router&gt;
            &lt;Switch&gt;
              &lt;Route 
                path="/" 
                component={App} 
              /&gt;
              &lt;Route 
                path="/terms" 
                component={Terms} 
              /&gt;
            &lt;/Switch&gt;
          &lt;/Router&gt;
        &lt;/PersistGate&gt;        
          &lt;/Provider&gt;       
      )
  }
  
  
  ReactDOM.render(&lt;ReduxWrapper /&gt;, document.getElementById('root'));
  
  </code></pre>
  
  <p>In a Drawer menu component, located within my App component, there is a Link component (part of the react-router-dom package) which when clicked, only changes the URL, but doesn't trigger a re-render, and a different component (Terms) to appear.</p>
  
  <p>The Drawer.js file where the Link component is rendered (just the render function):</p>
  
  <pre><code>import React from 'react'
  
  import {
      Link,
      withRouter
    } from "react-router-dom";
  
  function DrawerMenu(props){
      return (
          &lt;div style={{display: props.display}}&gt;
              &lt;div style={styles.overlay}&gt;
                  &lt;div style={styles.menu}&gt;
                      &lt;div style={styles.body}&gt;
                          &lt;div style={{left: 10, position: 'absolute', borderBottom: '1px solid white'}}&gt;
                              &lt;h2 style={styles.menuText}&gt;Coins: {props.coins}&lt;/h2&gt;
                          &lt;/div&gt;
                          &lt;div style={{left: 10, top: '15%', position: 'absolute',}}&gt;
                              &lt;Link to="/terms"&gt;&lt;h2 style={styles.menuText}&gt;Terms&lt;/h2&gt;&lt;/Link&gt;
                          &lt;/div&gt;
                          &lt;div style={{bottom: 5, left: 10, position: 'absolute',}}&gt;
                              &lt;h2 onClick={() =&gt; props.logOut()} style={styles.menuText}&gt;Log Out&lt;/h2&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div onClick={() =&gt; props.toggle()} style={{height: '100%', width: '17%', position: 'absolute', right: 0}}&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      )
  }
  
  export default withRouter(DrawerMenu)
  
  const styles = {
      overlay:{
          backgroundColor: 'rgba(0,0,0,0.5)',
          top: 0,
          bottom: 0,
          right: 0,
          left: 0,
          position: 'fixed',
          zIndex: 10,
          display: 'flex-row'
      },
      menu:{
          backgroundColor: 'white',
          top: 0,
          bottom: 0,
          position: 'absolute',
          width: '83%',       
      },
      menuText:{
          color: 'white',
      },
      body:{
          backgroundColor: 'rgb(158,209,237)',
          width: '100%',
          height: '100%'
      },
  }
  </code></pre>