CODEWITHSUNDEEP
javascriptreactjsreact-routerreact-router-v4
Maicmi
Maicmi

Reputation: 1104

React - How to return to previous pagination page?

My react application has the react-router v4 with the following search filter function:

  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 });
    });
  }

When I edit, it will route to edit page. When edit finish it route back, how can I route back with remain search result?

Upvotes: 3

Views: 4085

Answers (1)

Roy Scheffers
Roy Scheffers

Reputation: 3908

You can use the Link component from react-router and specify to={} as an object where you specify pathname as the route to go to. Then add a variable e.g. searchResult to hold the value you want to pass on. See the example below.

Using the <Link /> component:

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

Using history.push()

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

Using either of the above options you now can access searchResult on the location object as per the below in your page component. 

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

You can see an example of how to pass a value along with a route in another example here.

Upvotes: 3

Related Questions