react-router Link changes url but Route component doesn't render

Question

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

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 = () => {
    return (
        <Provider store={store}>
      <PersistGate persistor={persistor}>
        <Router>
          <Switch>
            <Route 
              path="/" 
              component={App} 
            />
            <Route 
              path="/terms" 
              component={Terms} 
            />
          </Switch>
        </Router>
      </PersistGate>        
        </Provider>       
    )
}


ReactDOM.render(<ReduxWrapper />, document.getElementById('root'));

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.

The Drawer.js file where the Link component is rendered (just the render function):

import React from 'react'

import {
    Link,
    withRouter
  } from "react-router-dom";

function DrawerMenu(props){
    return (
        <div style={{display: props.display}}>
            <div style={styles.overlay}>
                <div style={styles.menu}>
                    <div style={styles.body}>
                        <div style={{left: 10, position: 'absolute', borderBottom: '1px solid white'}}>
                            <h2 style={styles.menuText}>Coins: {props.coins}</h2>
                        </div>
                        <div style={{left: 10, top: '15%', position: 'absolute',}}>
                            <Link to="/terms"><h2 style={styles.menuText}>Terms</h2></Link>
                        </div>
                        <div style={{bottom: 5, left: 10, position: 'absolute',}}>
                            <h2 onClick={() => props.logOut()} style={styles.menuText}>Log Out</h2>
                        </div>
                    </div>
                </div>
                <div onClick={() => props.toggle()} style={{height: '100%', width: '17%', position: 'absolute', right: 0}}>
                </div>
            </div>
        </div>
    )
}

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%'
    },
}

Answer 1

You have to add exact key to your <Route path={"/"} component={App}>

You should now have this :

<Route path={"/"} component={App} exact>

Here the doc about exact key

Answer 2

This is because you have the root path as the first in the switch.

The link to "/terms" is matching "/" in the switch and rendering that component. You can simply change the order of your routes or add 'exact' as an attribute to the route.

<Route path={"/"} component={App} exact>