Redux Toolkit - how to block navigation? - react-redux

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]);
};