(HashHistory not supported) Changing URL in browser and clicking confirm doesn't navigate

[mcupito]

When I change the URL directly in the browser, I am seeing that my page is not actually navigating upon confirm of the action. I've briefly debugged and saw that the _state.action is POP when this occurs -- unsure if I can manually try to make this PUSH and see what happens.

Scenario:

On test.com/x
Type in test.com/y
Pop-up appears
Click Yes, Leave the Page (onConfirm)
Prompt closes and nothing else happens, but the URL stays the same

I am using React with Redux, along with React Router.

Here's the implementation :

import ConfirmModal from "../Confirm/Modal";

class NavigationBlocker extends React.Component {
    constructor(props) {
        super(props)
	}
	
	render() {
		return (
				<NavigationPrompt when={this.props.canSave}>
					{({ onCancel, onConfirm }) => (
						<ConfirmModal
							titleText={this.props.title}
							onCancelClicked={onCancel}
							onActionClicked={onConfirm}
							visible={true}
							cancelLabel={'No, keep working'} 
							actionLabel={'Yes, leave anyway'}
						>
							<p>{'Your changes were not saved. Do you still want to leave?'}</p>
						</ConfirmModal>
					)}
				</NavigationPrompt>
		);
	}
}

The ConfirmModal has a decent amount of code in it, but it doesn't truly do anything except render what was passed in and call the props as actions :

<Button type="button"  onClick={this.testActionClick} >
	<strong>{this.props.actionLabel || 'OK'}</strong>
</Button>

<a type="button"  onClick={(e) => this.cancelClicked(e, this.props.onCancelClicked)}>
	<strong>{this.props.cancelLabel || 'Cancel'}</strong>
</a>

Sidenote: I did not implement this code, but noticed this behavior and have since taken over trying to resolve it. I am aware that this implementation doesn't use any fancy comparison of location or anything that doesn't ship out of the box, so it could be a lacking implementation.

Thanks for your time!

[chiumax]

Hmm, this issue doesn't happen with any of my projects. Try looking at this example code that works: https://codesandbox.io/s/oq5rrjqjx9
Maybe it might help

[ZacharyRSmith]

Thanks for the issue, @mcupito .

When you say "Prompt closes and nothing else happens, but the URL stays the same", do you mean that the URL stays at test.com/x and does not navigate to test.com/y?

[ZacharyRSmith]

Also, it looks like you're passing NavigationPrompt's onConfirm as ConfirmModal's onActionClicked and calling ConfirmModal's this.testActionClick. Would you please share the method this.testActionClick?

[mcupito]

Yes for your first question, @ZacharyRSmith. Also, the testActionClick was just a placeholder for me to put a debugger.

What I end up seeing occur is that the URL changes to test.com/y in the browser, but the page never navigates and an error occurs within react-router (it appears) :

browser.js:49 Warning: Hash history cannot PUSH the same path; a new entry will not be added to the history stack

[ZacharyRSmith]

@mcupito are you using react-router's HashHistory instead of BrowserHistory? unfortunately, NavigationPrompt is not compatible with HashHistory (i think...i haven't tested it). it seems someone else had this issue with HashHistory: #2 (comment)

btw, if you look at the code, NavigationPrompt will push or replace, never pop: https://github.com/ZacharyRSmith/react-router-navigation-prompt/blob/master/src/index.js#L115

if you'd like to Pull Request a change that would make NavigationPrompt compatible with HashHistory, that'd be awesome!

[mcupito]

@ZacharyRSmith Yes we are using Hash -- As far as a PR, let me [find the time to] dig in a little deeper and see if I could provide a reasonable solution. Thanks for your responsiveness and your time!

[007arunwilson]

browser.js:49 Warning: Hash history cannot PUSH the same path; a new entry will not be added to the history stack
Same Issue for me in HashRouter

[riteshahlawat]

When implementing my own router prompt (without this package), I solved this issue by using history.replace() instead. Doing so when using hash history may be worth looking into.

[ZacharyRSmith]

Thanks, @riteshahlawat ! If anyone reading this would like to open a PR that uses history.replace() when using HashHistory, I think I'd merge. Cheers!

[SunStupic]

Here's my implementation

import { Modal } from '...';
import { useHistory, useLocation } from 'react-router';
import { UnregisterCallback, type Location } from 'history';
import { useEffect, useRef } from 'react';

interface NavigationPromptProps {
  when?: boolean;
  onOk?: () => boolean | Promise<boolean>;
  onCancel?: () => boolean | Promise<boolean>;
  title?: string;
  okText?: string;
  cancelText?: string;
}
export function useNavigationPrompt(props: NavigationPromptProps) {
  const { when, onOk, onCancel, title, okText, cancelText } = props;

  const history = useHistory();
  const curLocation = useLocation();
  const unblockRef = useRef<UnregisterCallback>();

  const onPrompt = (nextLocation: Location) => {
    if (nextLocation.pathname === curLocation.pathname || !when) return;
    if (nextLocation.pathname === '/login') return;

    // Reset the location to the current location first, so that
    // when confirmed: history.push(nextLocation) will work
    // when cancelled: no need to call history.replace(location) again
    history.replace(curLocation);

    Modal.confirm({
      title: title || 'You have unsaved changes',
      message: "Do you want to navigate away? Any changes you've made will be lost",
      okText: okText || 'Leave',
      cancelText: cancelText || 'Stay on this page',
      onOk: async () => {
        const onOkResult = await onOk?.();
        if (onOkResult !== false) {
          unblockRef.current?.();
          history.push(nextLocation);
        }
      },
      onCancel,
    });
    return false;
  };

  const onPromptRef = useRef(onPrompt);
  onPromptRef.current = onPrompt;

  useEffect(() => {
    if (!when) return;
    unblockRef.current = history.block(onPromptRef.current);
    return () => {
      unblockRef.current?.();
    };
  }, [history, when]);
}