CODEWITHSUNDEEP
reactjsreact-router
Victor Suzdalev
Victor Suzdalev

Reputation: 2212

Firing callback on query change in react router

I'm looking for solution for paging in routing with react-router and redux.

React-router don't fire callback in onEnter hook if only query changes, Router.run method is deprecated, so I'm a bit puzzled. Are there any other thing to do besides manually subscribing on location.change or use of react's lifecycle hooks like willReceiveProps?

Upvotes: 6

Views: 6105

Answers (2)

ericgio
ericgio

Reputation: 3519

For anyone using v2.0/v3.0, you can use the route's onChange hook to respond to query changes.

<Route
  component={...}
  path="..."
  onChange={(nextState, replace, callback) => {
    // Do something in response to a query change...
  }}
/>

onChange(prevState, nextState, replace, callback?) Called on routes when the location changes, but the route itself neither enters or leaves. For example, this will be called when a route's children change, or when the location query changes. It provides the previous router state, the next router state, and a function to redirect to another path. this will be the route instance that triggered the hook. If callback is listed as a 4th argument, this hook will run asynchronously, and the transition will block until callback is called.

https://github.com/remix-run/react-router/blob/v3/docs/API.md#onchangeprevstate-nextstate-replace-callback

Upvotes: 4

taion
taion

Reputation: 2837

Per the comments, the only hook left to you on the <Router> directly is onUpdate. You might also be able to intercept query parameters via a custom RoutingContext, but we don't currently consider that a public API.

We're looking to add a better solution for this use case in the future, but the approaches outlined are the only ones available for the 1.0.0 release.

Upvotes: 6

Related Questions