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

Вот снимок реквизита PrivateRoute, когда он визуализирует компонент:

5
maison.m 29 Окт 2019 в 21:07
Если вы используете props.history.replace() при переходе от /games к /viewgame/id*, это заменит эту запись в истории, заставив браузер вернуться к панели управления. Если это то, что происходит в вашем коде, вы должны вместо этого использовать props.history.push().
 – 
seanulus
29 Окт 2019 в 21:22
Используя расширение реагирования в вашем браузере, как выглядят реквизиты для каждого из ваших компонентов <PrivateRoute> на каждом этапе? У них есть реквизиты маршрута?
 – 
technicallynick
29 Окт 2019 в 21:43
Эй, спасибо за комментарий и извините за поздний ответ. Реквизиты в компонентах PrivateRoute показывают объект местоположения, а также путь, но я не вижу никаких предыдущих реквизитов маршрута или чего-либо связанного с ним.
 – 
maison.m
22 Ноя 2019 в 18:32
Как настроены ваши ссылки в компонентах DashboardView и Games? Вы используете реактивный маршрутизатор <Link /> или history.push()?
 – 
SharpSeeEr
22 Ноя 2019 в 19:09
Может потребоваться воспроизведение кода и ящика или чего-то подобного. Я не вижу в вашем коде ничего, что сразу указывало бы на виновника.
 – 
technicallynick
25 Ноя 2019 в 21:51

3 ответа

Вы можете добиться этого, вызвав функцию 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>
  )
});
6
Bart 29 Окт 2019 в 21:24
4
Я не думаю, что это то, о чем просит @maison.m. Он сказал, что «... может отправить кого-то обратно на маршрут, настроив [свою] собственную кнопку «нажмите, чтобы вернуться», но [ему] нужны настоящие кнопки браузера «назад» и «вперед», чтобы сделать это». Это решение просто добавляет кнопку на страницу, которую пользователь может нажать, чтобы вернуться, а не встроенную/собственную кнопку в браузере пользователей.
 – 
technicallynick
29 Окт 2019 в 21:32
ReactRouter имеет этот пакет в качестве зависимости, которая использует историю сеансов браузера. В этом случае history.goBack() возвращает вас на последнюю посещенную страницу. Подробнее об API истории здесь. Не знаю, этого ли хотел @maison.m, но думаю, что это могло бы ему помочь в любом случае.
 – 
Bart
29 Окт 2019 в 21:45

Вы можете просто использовать хук useHistory из react-router-dom

import { useHistory } from "react-router-dom";

const history = useHistory();

...

<div onClick={ ()=>history.goBack() }>Back </div>
0
Abraham 7 Июл 2021 в 15:40

Удалите «точный» из ваших реквизитов маршрутов.

-2
king_leo 20 Июл 2021 в 14:38