javascripthtmlreactjsreduxreact-router-component

React: How to prompt for unsaved changes when navigating with react-router-component


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.


Solution

  • 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).