Warning: A history supports only one prompt at a time (ie, using multiple <NavigationPrompt /> is a bad idea?)

[rsmylskibc]

Do you want to request a feature or report a bug?
Bug

What is the current behavior?
If you are using NavigationPrompt inside multiple components that can be rendered inside a parent component, Warning: A history supports only one prompt at a time is thrown if you change from rendering one component that uses NavigationPrompt to another component using NavigationPrompt.

If the current behavior is a bug, please provide the steps to reproduce.
Create two components that include NavigationPrompt as a child.
Create a component that will render the first component by default, then conditionally render the second component instead on a state change.

What is the expected behavior?
NavigationPrompt should appropriately bind to history.block utilizing lifecycle methods, not binding before it needs to.

With doing some of my own debugging, if history.block is not set to state.unblock during the constructor, but in componentDidMount this collision does not occur.

[ZacharyRSmith]

Thanks, @rsmylskibc ! Would you please make a pull request for this change?

[ghost]

@ZacharyRSmith I have the latest 1.8.4 version and I still have the "Warning: A history supports only one prompt at a time" error message...

P.S. both components are present in the DOM (I have two tabs and toggle between them on state change)

[ZacharyRSmith]

@Ameer157 thanks for bringing this to my attention, would you please PR a fix, or at least provide a reproducible example? Or @kuhelbeher, could you look more into this? Thanks!

[ghost]

@Ameer157 thanks for bringing this to my attention, would you please PR a fix, or at least provide a reproducible example? Or @kuhelbeher, could you look more into this? Thanks!

Thanks for the attention @ZacharyRSmith 🥇

The bug can be reproduced by having two instances of </NavigationPrompt> into the DOM.
As I mentioned in my previous comment, that I have two tabs that toggle between two components and each component has its own react from and </NavigationPrompt> Since the two components are present in the DOM at the same time I receive the "Warning: A history supports only one prompt at a time" error.

I hope I was clear enough

[ZacharyRSmith]

Yes, you are clear, thanks.

Just as an FYI: I don't have the time to debug this. Hopefully someone else will be able to look into this!

[ghost]

Yes, you are clear, thanks.

Just as an FYI: I don't have the time to debug this. Hopefully someone else will be able to look into this!

No worries, thanks anyways!
I will try to have someone with better React experience than me to look into this as well ;)

[kuhelbeher]

I had a different case - two components with <NavigationPrompt> was neighbours and when I was switching between them error occurs.

@Ameer157, maybe you can place <NavigationPropmpt> component in parent component instead of two component which present in the DOM at the same time. This should fix your problem.

[ghost]

I had a different case - two components with <NavigationPrompt> was neighbours and when I was switching between them error occurs.

@Ameer157, maybe you can place <NavigationPropmpt> component in parent component instead of two component which present in the DOM at the same time. This should fix your problem.

Thanks for the tip @kuhelbeher - this is a perfect walk-around 👍

@ZacharyRSmith

[Joachimzeelmaekers]

@Ameer157, maybe you can place <NavigationPropmpt> component in parent component instead of two component which present in the DOM at the same time. This should fix your problem.

Works for me too! Thanks!