React Router - возврат к последней посещенной странице, а не к компоненту по умолчанию

Question

У меня возникла небольшая проблема с React Router, которую я не могу понять. Он не возвращается к самой последней посещенной странице, а к первой загруженной странице. Вот пример.

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import PrivateRoute from './utils/auth/PrivateRoute';
    <Router>
      <PrivateRoute exact path="/dashboard" component={DashboardView} />
      <PrivateRoute exact path="/games" component={Games} />
      <PrivateRoute
        exact
        path="/viewgame/:id*/"
        component={SingleGameView}
      />
    </Router>

Когда вы переходите на /dashboard, вы можете нажать, чтобы просмотреть список игр, который приведет вас к /games. Затем вы можете щелкнуть игру, чтобы увидеть ее один вид, который приведет вас к /viewgame/:id*

Примерно так: / dashboard -> / games -> / viewgame /: id *

Когда вы нажимаете на игру и переходите на /viewgame/, а затем решаете щелкнуть обратно в браузере, он возвращает меня к /dashboard вместо того, чтобы вернуться к / games. Он пропускает последнюю посещенную страницу и возвращает меня к первой загруженной странице. Я могу отправить кого-то обратно на маршрут, установив собственную кнопку «щелкнуть, чтобы вернуться», но мне нужна браузерная кнопка «назад» и «вперед», чтобы сделать это.

PrivateRoute - это настройка HOC I, чтобы проверить, аутентифицирован ли пользователь, обращающийся к маршруту, или нет. В противном случае они загружаются. На случай, если это может быть проблемой, вот этот компонент:

import React from 'react';
import { Route, Redirect } from 'react-router-dom';

//Utils - Auth
import { userAuth } from '../../../authentication/authentication';
const { isAuthenticated } = userAuth;

//Checks if a user isAuthenticated. If so, it renders the passed in secure component. If not, it renders a redirect to /signin
const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route
    {...rest}
    render={props =>
      isAuthenticated() ? (
        <Component {...props} />
      ) : (
        <Redirect
          to={{
            pathname: '/signin',
            state: { from: props.location }
          }}
        />
      )
    }
  />
);

export default PrivateRoute;

Answer 1

Этого можно добиться, вызвав функцию goBack() в history объекте внутри withRouter().

import React from 'react';
import { withRouter } from 'react-router-dom'

export default withRouter(({ history }) => {
  return (
    <div>
      <button onClick={() => history.goBack()}>BACK</button>
    </div>
  )
});