Реакция-маршрутизатор Ссылка изменяет URL, но компонент Route не рендерит

Question

Я пытался реализовать response-router-dom, но, похоже, он конфликтует (потенциально) либо с Redux, либо с Redux-persist. Мой индекс. js выглядит как

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'));

В компоненте меню Drawer, расположенном в компоненте моего приложения, есть компонент Link (часть пакетаact-router-dom), который при нажатии только изменяет URL, но не запускает повторную визуализацию, и появляется другой компонент (Условия).

Файл Drawer. js, в котором отображается компонент Link (только функция визуализации):

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

Это потому, что у вас есть путь root в качестве первого в коммутаторе.

Ссылка на "/ term" совпадает с "/" в переключателе и отображает этот компонент. Вы можете просто изменить порядок своих маршрутов или добавить «точный» в качестве атрибута маршрута.

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

Answer 2

Вы должны добавить exact ключ к вашему <Route path={"/"} component={App}>

Теперь у вас должно быть это:

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

Здесь do c about exact ключ