history.listen doesn't fire as I expected

Question

When using history.listen , I found it was fired AFTER componentDidMount of my children's component. After Google it, I found this issue .

By following the suggestion of the contributor, the history.listen fired indeed BEFORE the componenDidMount of my children component. But at the same time, I found the history.listen just does NOT fire anymore when navigating between my children's components. This behavior is not mentioned by the lib contributor and is not what I expected to happen.

Reproduce Link: https://codesandbox.io/s/unruffled-rain-q453q?file=/src/index.js

I think I must doing something wrong and because the contributor said it is expected because of the React mechanism.

So here I want to know what's the specific React mechanism is about for routing and know the right way to fulfill my requirement.

Just to be clear, my requirement is when the parent component registers a history.listen :

1. it should Fire whenever the URL changes, no matter what sync or async.
2. it should fire AFTER the componentDidMount of its children component.

Could anyone help me, please?

Answer 1

Register in the constructor in the App Component is too late, should create a wrapper that wraps the App component, register the callback first and then pass history to the App component.