Функциональность кнопки возврата браузера React-Router / Redux - PullRequest
0 голосов
/ 20 февраля 2019

Я создаю клон 'Hacker News', Живой пример с использованием React / Redux и не могу заставить эту последнюю часть функциональности работать,У меня весь App.js, завернутый в BrowserRouter, и withRouter, импортированный в мои компоненты с использованием window.history.Я помещаю свое состояние в window.history.pushState(getState(), null, `/${getState().searchResponse.params}`) в моем создателе действия вызова API.console.log(window.history.state) показывает все состояние моего приложения в консоли, так что оно выдвигается просто отлично.Похоже.В моем главном компоненте, который отображает сообщения, у меня есть

componentDidMount() {
    window.onpopstate = function(event) {
      window.history.go(event.state);
    };
  }
....I also tried window.history.back() and that didn't work

, что происходит, когда я нажимаю кнопку «Назад»: панель URL обновляется с правильным предыдущим URL, но через секунду страница перезагружается вURL основного индекса (домашняя страница).Кто-нибудь знает, как это исправить?Я не могу найти какую-либо реальную документацию (или любые другие вопросы, которые являются общими и не специфическими для конкретной проблемы OP), которые имеют какой-либо смысл для React / Redux и где поместить onpopstate или что делать вместо onpopstate чтобы это работало правильно.

РЕДАКТИРОВАТЬ: добавлено больше кода ниже

Создатель действий:

export const searchQuery = () => async (dispatch, getState) => {

 (...)

  if (noquery && sort === "date") {
    // DATE WITH NO QUERY
    const response = await algoliaSearch.get(
      `/search_by_date?tags=story&numericFilters=created_at_i>${filter}&page=${page}`
    );
    dispatch({ type: "FETCH_POSTS", payload: response.data });
  } 

(...)

  window.history.pushState(
    getState(),
    null,
    `/${getState().searchResponse.params}`
  );
  console.log(window.history.state);
};

^^^ Это записывает все мои состояния Redux правильно на консоль через window.history.state, поэтому я предполагаю, что я правильно реализую window.history.pushState().

Компонент PostList:

class PostList extends React.Component {
  componentDidMount() {
    window.onpopstate = () => {
      window.history.back();
    };
  }

(...)

}

Я пыталсяизменение window.history.back() на this.props.history.goBack() и не работает.Имеет ли смысл мой код?Я в корне неверно понимаю API истории?

1 Ответ

0 голосов
/ 20 февраля 2019

withRouter HOC дает вам историю как опору внутри вашего компонента, поэтому вы не используете тот, который предоставлен окном.

Вы должны иметь доступ к истории window.history, даже не используя withRouter.

, поэтому это должно быть что-то вроде:

const { history } = this.props;
history.push() or history.goBack()
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...