title: Custom React Router Prompt: A history supports only one prompt at a time
body: <p>I have created a custom React Router Prompt to show when the user wants to navigate to other page and have not saved the data yet.</p>
  <p>Everything seems to be working as it should, but I have an annoying warning:</p>
  <pre><code>Warning: A history supports only one prompt at a time
  </code></pre>
  <p>The component looks like this:</p>
  <pre><code>export function RouterPrompt(props) {
      const {when, onOK, onCancel, title} = props;
  
      const history = useHistory();
  
      const [showPrompt, setShowPrompt] = useState(false);
      const [currentPath, setCurrentPath] = useState(&quot;&quot;);
  
      useEffect(() =&gt; {
          if (when) {
              history.block((prompt) =&gt; {
                  setCurrentPath(prompt.pathname);
                  setShowPrompt(true);
                  return &quot;true&quot;;
              });
          } else {
              history.block(() =&gt; {
              });
          }
      }, [when]);
  
      const handleOK = useCallback(async () =&gt; {
          if (onOK) {
              const canRoute = await Promise.resolve(onOK());
              if (canRoute) {
                  history.block(() =&gt; {
                  });
                  history.push(currentPath);
              }
          }
      }, [currentPath, history, onOK]);
  
      const handleCancel = useCallback(async () =&gt; {
          if (onCancel) {
              const canRoute = await Promise.resolve(onCancel());
              if (canRoute) {
                  history.block(() =&gt; {
                  });
                  history.push(currentPath);
              }
          }
          setShowPrompt(false);
      }, [currentPath, history, onCancel]);
  
      return showPrompt ? (
          &lt;Dialog
              open={showPrompt}
              onClose={handleCancel}
              aria-labelledby=&quot;alert-dialog-title&quot;
              aria-describedby=&quot;alert-dialog-description&quot;
          &gt;
              &lt;DialogTitle id=&quot;alert-dialog-title&quot;&gt;
                  {title}
              &lt;/DialogTitle&gt;
              &lt;DialogContent&gt;
                  &lt;DialogContentText id=&quot;alert-dialog-description&quot;&gt;
                      There are unsaved changes. Are you sure want to leave this page?
                  &lt;/DialogContentText&gt;
              &lt;/DialogContent&gt;
              &lt;DialogActions&gt;
                  &lt;Button onClick={handleCancel}&gt;Stay on page&lt;/Button&gt;
                  &lt;Button onClick={handleOK} autoFocus&gt;
                      Leave
                  &lt;/Button&gt;
              &lt;/DialogActions&gt;
          &lt;/Dialog&gt;
      ) : null;
  }
  </code></pre>
  <p>As far as I was able to do some research on this, this comes from the class lifecycle methods (useEffect runs before unmouting the current history.block), but in reality only one Prompt is rendered in the DOM.</p>
  <h2>Edit</h2>
  <p>I have discovered another bug, that this will change the path regardless of the actual push or not. So in the URL the path changes but the view don't, so next time when you press back and Confirm, instaed of staying on the page, you will be 2 steps back in history.</p>