Redux Toolkit - how to block navigation?

Question

I have no idea how you can implement blocking page navigation in redux-toolkit. For example, before switching to another page, if some clause is false, then don't allow the switching.

How can this be done?

• I found something that can be done via react-router Prompt.
• Also, redux-toolkit supports the usePrefetch hook - but I'm not sure if it is applicable here.
• There are also history.push methods and stuff from the history object.

I need to check the number of objects in my Queue before switching to another page. If there is more than zero, but do not allow to go to another page.

I've never worked with blocking navigation. Tell me how this can be implemented specifically for the Redux Toolkit in the most optimal and beautiful way?

Answer 1

I found the solution here

Using history.block with asynchronous functions/callback/async/await

const useIsValidBlockedPage = () => {
  const history = useHistory();
  const { isValid } = useFormikContext();

  useEffect(() => {
    const unblock = history.block(({ pathname }) => {
      // if is valid we can allow the navigation
      if (isValid) {
        // we can now unblock
        unblock();
        // proceed with the blocked navigation
        history.push(pathname);
      }
      // prevent navigation
      return false;
    });

    // just in case theres an unmount we can unblock if it exists
    return unblock;
  }, [isValid, history]);
};