title: Is there a way to stop using UNSAFE_NavigationContext (for detecting navigation to other page in React Router v6)
body: <p>By searching the internet, I finally developed a hook that allows me to detect when the user is trying to navigate to another page of the app</p>
  <p>I'm using React Router v6, which doesn't have an easy way to do this (history and prompt have been deprecated)</p>
  <p>I built a code sandbox where you can see it all working (it also uses Mui), you'll see my refactored version which is more understandable and uses javascript</p>
  <p><a href="https://codesandbox.io/s/navigating-prompt-rizh7n?fontsize=14&amp;hidenavigation=1&amp;theme=dark" rel="nofollow noreferrer"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="Edit navigating-prompt" /></a></p>
  <p>As you can see, it has a /hooks/navigationBlocker that uses UNSAFE_NavigationContext (which was developed by the same guys that developed React Router)</p>
  <pre><code>import * as React from 'react';
  import { UNSAFE_NavigationContext } from 'react-router-dom';
  
  export function NavigationBlocker(navigationBlockerHandler, canShowDialogPrompt) {
      const navigator = React.useContext(UNSAFE_NavigationContext).navigator;
  
      React.useEffect(() =&gt; {
          if (!canShowDialogPrompt) return;
  
          const unblock = navigator.block((tx) =&gt; {
              const autoUnblockingTx = {
                  ...tx,
                  retry() {
                      unblock();
                      tx.retry();
                  }
              };
  
              navigationBlockerHandler(autoUnblockingTx);
          });
  
          return unblock;
      });
  }
  </code></pre>
  <p>I don't understand this code much, I guess it is so because I never used anything previous to react-router-dom v6</p>
  <p>Is there a way to do the same without the use of UNSAFE_NavigationContext, I don't know why it's unsafe as its name suggests</p>
  <p>Rafael</p>