Intercept/handle browser's back button in React-router?

Question

I\'m using Material-ui\'s Tabs, which are controlled and I\'m using them for (React-router) Links like this:

Answer 1

Upcoming version 6.0 introduces useBlocker hook - which could be used to intercept all navigation attempts.

import { Action } from 'history';
import { useBlocker } from 'react-router';

// when blocker should be active
const unsavedChanges = true;

useBlocker((transition) => {
    const {
        location, // The new location
        action, // The action that triggered the change
    } = transition;

    // intercept back and forward actions:
    if (action === Action.Pop) {
        alert('intercepted!')
    }

}, unsavedChanges);