ReactJS历史记录推送在抽屉组件中不起作用

Question

App.js

import React from "react";

import { Router, Route, Switch } from "react-router-dom";
import history from "../src/history";


// Redux
import { Provider } from "react-redux";
import store from "./store";


function App() {
  const classes = useStyles();
  return (
    <Provider store={store().store}>
      <PersistGate loading={null} persistor={store().persistor}>
        <div className={classes.root}>
          <NavBar />
          <Drawer />
          <Router history={history}>
            <Switch>
              <Route path="/" exact component={Login}></Route>
              <Route path="/country" exact component={Country}></Route>
              <Route path="/user-create" exact component={User}></Route>
              <Route path="/countries" exact component={ListView}></Route>
            </Switch>
          </Router>
        </div>
      </PersistGate>
    </Provider>
  );
}

// export default connect() (App);
export default App;

History.js

import { createBrowserHistory } from 'history';

export default createBrowserHistory();

Drawers.js

import history from '../../history'


function TemporaryDrawer(props) {
 
  

  

  const onRoute = (path) => {
   
    history.push(path);
    
  }
    /......... other codes

  
  
}
const mapStateToProps = (state) => {
  return { isDrawerOpen: state.auth.isDrawerOpen, token: state.auth.token };
};

export default connect(mapStateToProps, { toggleDrawer })(TemporaryDrawer);

在Drawer组件中，我想更改路线。当我点击route方法时，可以在Web浏览器URL中看到路由名称正在更改。但是它不会在浏览器中呈现该组件。如果刷新页面，则它将呈现页面。为什么会发生这种情况？