У меня возникла небольшая проблема с 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*

Вот так: / панель инструментов -> / игры -> / viewgame /: id *

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

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

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;
0
maison.m

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>
  )
});
58613164