React-router: Prompt in React 16 "Warning: A history supports only one prompt at a time"

[fdev]

Version

react-router-dom 4.2.2
react 16.0.0

Test Case

https://codesandbox.io/s/rrn9vww8pn

Cause

There is a breaking change in React 16:

When replacing <A /> with <B />, B.componentWillMount now always happens before A.componentWillUnmount. Previously, A.componentWillUnmount could fire first in some cases.

In the Test Case above each page (Home, About, Topics) has a Prompt component. Because of the asynchronous nature of the React 16 lifecycle, history warns about two prompts being mounted at the same time:

Warning: A history supports only one prompt at a time

At no point in time are there actually two Prompt components "on screen", but this warning does get triggered.

Issue https://github.com/ReactTraining/history/issues/536 is caused by the same breaking change.
Perhaps issue https://github.com/facebook/react/issues/11106 will provide an answer how to resolve this problem.

[timdorr]

I wonder if we can wrap this line in a setTimeout and call it a day?

[fdev]

@timdorr The problem is componentWillUnmount triggers _after_ componentWillMount. Your solution doesn't change that.

Using setTimeout in componentWillMount _might_ change the order, but I'm not sure you have any guarantee it will.

[timdorr]

Yeah, sorry, I had that backwards. What about changing to cDM? Will that work? I'm not a user of <Prompt>, so I'm not well-versed here.

[pshrmn]

cDM should work since it will be called after the cWU of the unmounting component.

[bora89]

We have the same issue, do you have some workaround guys?

[kbaird5]

The suggested workaround to setting 'when' to true in cDM works. Prompt.js should follow this suggestion (https://github.com/facebook/react/issues/11106) and update its code to use cDM instead of cWM. This would get rid of the warning message.

[kateli]

i have the same issue too, it makes me headache . sos

[kateli]

i solved it finnaly
promptwrapper.js:

your page.js:

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.