必须在浏览器中单击两次或两次以上OOTB的“返回上一页”按钮，才能浏览一页

Question

我是react和react-route的新手。我有一个结果列表或一个结果详细页面，当我想导航到上一页时，必须在OOTB返回“浏览器”按钮上单击两次或更多次。您能帮我解决这个问题吗？

应用

import React, { Fragment } from 'react';
import { Router, Route, Switch } from 'react-router-dom';
import MainPage from '../pages/MainPage';
import SearchResult from '../components/searchResult/SearchResult';
import ResultDetails from '../components/resultDetails/ResultDetails';
import Header from './header/Header';
import history from '../history';


const App = () => {
    return (
      <div className="ui container">
        <Router history={history}>
          <div>
            <Switch>
              <Route exact path='/' component={MainPage} /> 
              <Fragment>
              <Header />
              <Route exact path="/results/:id" component={SearchResult} />
              <Route exact path="/details/:id"  component={ResultDetails} />
              </Fragment>        
            </Switch>

          </div>
        </Router>
      </div>
    );
  };

  export default App;

主要索引

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware, compose } from 'redux';
import reduxThunk from 'redux-thunk';

import App from './components/App';
import reducers from './reducers';

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(
    reducers,
    composeEnhancers(applyMiddleware(reduxThunk)),
    );

ReactDOM.render(
    <Provider store={store}>
      <App />
    </Provider>,
    document.querySelector('#root')
  );

历史

import { createBrowserHistory } from 'history'; 

export default createBrowserHistory();