Приходится нажимать два или более раз кнопку OOTB «Вернуться на предыдущую страницу» в браузерах, чтобы перейти на одну страницу назад.

Question

Я новичок в реакции и реагировании.У меня есть список результатов или страница сведений о результатах, и когда я хочу перейти на предыдущую страницу, я должен нажать два или более раз на кнопку 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();