React Router - обнаруживает, когда пользователь нажимает кнопку возврата, которая изменяет параметры запроса URL

Question

У меня есть компонент React, который должен получать данные с помощью AJAX (axios) и обновлять параметры запроса URL-адреса, когда пользователь нажимает кнопку.Также, что более важно, я хочу получать данные, когда пользователь нажимает кнопку «Назад», «Вперед» и т. Д. Как я могу это сделать?

Answer 1

Я нашел, что лучший способ получить данные, когда пользователь нажимает кнопку «Назад» или «Вперед», - это делать это при изменении маршрута в componentWillReceiveProps, используя преимущества nextProps.

Для предисловия я используюПакет 'query-string' для анализа моей строки запроса, 'response-redux' для управления состоянием и получения данных и 'response-router-dom' для изменения маршрутов.

Вот как выглядит мой componentWillReceiveProps.

componentWillReceiveProps(nextProps) {

if (this.props.location.search !== nextProps.location.search) {
  let parsed = queryString.parse(nextProps.location.search);
  const search = '?' + queryString.stringify(parsed);
  const uri = ENV_URL + nextProps.location.pathname;
  this.props.getContestEntriesPageData(uri, search);
}
}

Вот пример функции, которая запускается, когда пользователь нажимает кнопку, которая должна обновить данные.

changePage(page_num) {

let parsed = queryString.parse(this.props.location.search);

parsed.page = page_num;

const search = '?' + queryString.stringify(parsed);

const routeUri = this.props.location.pathname + search;

this.props.history.push(routeUri);

}

Я использовал для включения this.props.getContestEntriesPageData (uri, поиск);в функции changePage, но я обнаружил, что лучше (и необходимо) иметь только this.props.getContestEntriesPageData (uri, search);в функции жизненного цикла componentWillReceiveProps.

Кажется, это работает нормально для меня.React Router обрабатывает изменения кнопки возврата при переходе с одной страницы на другую, но не при изменении параметров запроса.Это, вероятно, то, что я должен сделать для каждого компонента, который изменяет параметры URL, а не страницы, если я хочу, чтобы кнопка «Назад» работала правильно.