javascript - React - 如何返回到上一个分页页面？

Question

我的 React 应用程序具有 react-router 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

您可以使用 react-router 中的 Link 组件并指定 to={}作为一个对象，您将路径名指定为要到达的路径。然后添加一个变量，例如searchResult持有你想要传递的值(value)。请参见下面的示例。

使用 <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
  )
}

您可以在另一个示例中看到如何将值与路由一起传递的示例 here .