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 remix-run/history#536 is caused by the same breaking change.
Perhaps issue facebook/react#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 (facebook/react#11106) and update its code to use cDM instead of cWM. This would get rid of the warning message.

[xuiwife]

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

[xuiwife]

i solved it finnaly
promptwrapper.js:

your page.js:

[stale]

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.