[Bug]: when click browser's back button the useBlocker hook could not block the navigate rightly

[zhangyunhai2021]

What version of React Router are you using?

6.23.1

Steps to Reproduce

I click browser's back button the location changes to a next location and then the confirm show, when I choose ok, the location changes back and not navigate ,why? Then I try to add navigate() method, the page navigate rightly but when I repeat last action the location change to the next location but the page nothing happened, so I click the back button secondly, the confirm show, why? the following code

export const useGuard = (hasSaved: boolean) => {
  // const navigate = useNavigate();
  const shouldBlock = useCallback<BlockerFunction>(
    ({ currentLocation, nextLocation }) => !hasSaved && currentLocation.pathname !== nextLocation.pathname,
    [hasSaved]
  );
  const blocker = useBlocker(shouldBlock);
  useEffect(() => {
    if (blocker.state === 'blocked' && hasSaved) {
      blocker.reset();
    }
    // for refresh
    if (!hasSaved) {
      window.onbeforeunload = (e) => {
        e.preventDefault();
        return '';
      };
    }
    // for route change
    if (blocker.state === 'blocked') {
      const isOK = window.confirm('Are you sure you want to leave?');
      if (isOK) {
        blocker.proceed();
        // navigate(blocker.location.pathname);
      } else {
        blocker.reset();
      }
    }
    return () => {
      window.onbeforeunload = null;
    };
  }, [hasSaved, blocker]);
};

Expected Behavior

I hope that when click the back button the location not change and the confirm show, while i choose ok,the location change to the next location and the page change

Actual Behavior

Actual performance is as above

[zhangyunhai2021]

Has anyone else encountered the same problem?

[somin18501]

@brophdawg11 Is there any workaround for this? Similar such issue: https://github.com/remix-run/react-router/issues/11385

[somin18501]

@brophdawg11 Also, just FYI, we are using createHashRouter data API, which supports useBlocker hook as per this table.

[somin18501]

@brophdawg11 My issue was resolved after I commented out a few of my code lines that used history.listen to subscribe to navigation changes.

Can you provide me with some facts on how it impacted the functioning of the useBlocker hook? also can suggest some better way to subscribe to navigation changes in react-router-v7.

[ragoso]

didn't work for me with version 7.6.2 using Data API

[github-actions[bot]]

To align with our new Open Governance model, we are now requiring that all issues have a minimal and runnable reproduction. To that end, we're doing some housekeeping in the repo to clean up existing issues that do not have a valid reproduction. This should get us down to a more manageable number of issues and allow us to be more responsive to existing and newly filed issues.

We're using a Github actions script to identify issues without a reproduction by looking for a StackBlitz, CodeSandbox, or Github link in the issue body. This won't be perfect, so if this issue has a reproduction on another platform, please comment back on here and we can re-open the issue. Similarly, if there's a reproduction buried in a comment, please move the link into the description and comment back. Please tag @brophdawg11 or @brookslybrand in your comment so we get a notification as well 🙂.

If this issue did not have a reproduction but is still valid, or if you wish to start with a fresh issue, please create a new issue with a fresh reproduction against v7 and link to this issue in the new description.

If this a feature request, please open a new Proposal Discussion in React Router, and if it gets enough community support it can be considered for implementation.

If you have any questions you can always reach out on Discord. Thanks again for providing feedback and helping us make React Router even better!