Firing callback on query change in react router

Question

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?

Won't `componentWillMount` on the component you're "going to" be enough? — mfirry, Nov 12 '15 at 12:37
No, because route handler wouldn't be re-mounted on this. I'm fine with `onEnter` for initial loading, but it doesn't fire on query param change — Victor Suzdalev, Nov 12 '15 at 12:46
I want to put all logic in router, not components. Of course, react lifecycle hooks will work, and I can listen to history or whatever. — Victor Suzdalev, Nov 12 '15 at 13:15

score 6 · Accepted Answer · answered Nov 13 '15 at 04:42

6

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.

answered Nov 13 '15 at 04:42

taion

2,827
1
14
22

Didn't know there's such hook in 1.0 router, looks like it's at least undocumented. – Victor Suzdalev Nov 14 '15 at 10:54
Thanks for pointing this! I've looked all over Route docs, which was the wrong place )) – Victor Suzdalev Nov 15 '15 at 11:47
how do you fire to current route component an event about querystring change? which event? – g.annunziata Apr 24 '17 at 14:28

ericgio · Answer 2 · 2022-06-28T16:50:19.683

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

Thanks @MattiasWallin, link updated and pasted the relevant text inline. — ericgio, Jun 28 '22 at 16:50

Firing callback on query change in react router

2 Answers2