There is a editor in the tab and if the user has not saved the editor content and switches to other ui tab the unsaved content is lost as the react component unmounts.

I have tried React Router Prompt and this only works when the route url changes. In my case route url doesn’t change. I have used material ui tabs.

 <Prompt
    when={editorContentSaved}
    message="Are you sure you want to leave?"
 />    

I tried JavaScript confirm box in useEffect return function, which gets invoked before unmouting but this doesn’t stops the user from navigating. Only thing here I can do is decide if user wants to save the content or not. But can’t stop navigation.

useEffect(() => {
    return () => {
        let confirmValue = window.confirm("Do you want to save the changes?");
    }
})

How do I warn the user when route doesn’t change but component does change.

Source: Ask Javascript Questions