7

Redux state holds flag for unsaved changes, and I want to prompt user when navigating (clicks a Link) if this flag is set. I'm using react-router-component. I didn't find how to do this in documentation.

Tuomas Toivonen
  • 21,690
  • 47
  • 129
  • 225

2 Answers2

13

Anyone reaching this post in 2018 and using the react router 4+, I'd suggest reading this reacttraining example

TL;DR use the Prompt component at the top 

<Prompt
    when={hasUnsavedChanges}
    message="There are unsaved changes, do you wish to discard them?"
/>

enter image description here

Jay Wick
  • 12,325
  • 10
  • 54
  • 78
0

You should simply be able to create your own Link component (that inherits from Router.NavigatableMixin, example here https://github.com/STRML/react-router-component/issues/105#issuecomment-63874805 and here http://strml.viewdocs.io/react-router-component/recipes/custom-link/).

Then you just handle click event on that component by prompting user if they want to navigate away if 'yes' you just continue with this.navigate(...) (from within your component, inheriting from Navigatable).

WTK
  • 16,583
  • 6
  • 35
  • 45
  • It worked otherwise, but the mouse pointer hover state disappeared. How do I preserve the original behavior of Link other than writing custom click handler? – Tuomas Toivonen Jul 21 '16 at 11:27
  • 1
    Hover state is probably css-only thing - check styles on Link component & compare with yours. – WTK Jul 21 '16 at 19:32
  • This looks like a very bad solution because there are potentially a lot of ways that you could navigate away without clicking the link. e..g. hitting "back" in your browser. – Peter Hall Oct 17 '21 at 21:57