Реагировать - Как вернуться на предыдущую страницу нумерации страниц?

Question

У моего приложения реагирования есть реагирующий маршрутизатор v4 со следующей функцией поискового фильтра:

  filterList = (e) => {
    let { value } = e.target;
    this.setState({ value }, () => {
        var searchValue = this.state.value.toLowerCase();
        var updatedList = this.state.holder;
        updatedList = updatedList.filter((item) => {
            return Object.keys(item).some(key => item[key].toString().toLowerCase().search(searchValue) !== -1);
        });
            this.setState({ books: updatedList });
    });
  }

Когда я редактирую, он будет перенаправлять на страницу редактирования. Когда редактирование завершает маршрут обратно, как я могу вернуться обратно с оставшимся результатом поиска?

Answer 1

Вы можете использовать компонент Link из реактивного маршрутизатора и указать to={} в качестве объекта, в котором вы указываете путь к маршруту. Затем добавьте переменную, например, searchResult для хранения значения, которое вы хотите передать. Смотрите пример ниже.

Использование компонента <Link />:

<Link
  to={{
    pathname: "/page",
    searchResult: this.state.searchResult
  }}
>

Использование history.push()

this.props.history.push({
  pathname: '/page',
  searchResult: this.state.searchResult
})

Используя любой из вышеперечисленных параметров, вы теперь можете получить доступ к searchResult для объекта местоположения, как показано ниже в компоненте вашей страницы.

render() {
  const { searchResult } = this.props.location
  return (
    // render logic here
  )
}

Вы можете увидеть пример того, как передать значение вместе с маршрутом, в другом примере здесь .