React - 如何return到上一个分页页面？

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 来保存你想要传递的价值。请参阅下面的示例。

使用 <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。

React - 如何return到上一个分页页面？

React - How to return to previous pagination page?

javascript

reactjs

react-router

react-router-v4