title: Prevent or Block navigation in ReactJs
body: <p>I have a page with two functions let's say start function and stop function, both are on-click functions once the start button is clicked I want to stop navigation so the user can't go to any other pages until he clicks the stop button I am currently using react-router prompt where it shows one modal to click if he wants to go or not. but I want to stop navigation until the stop button clicks. Kindly guide me on how to do it</p>
  <p>React code:</p>
  <pre><code>const [isDataChanged,setDataChanged]=useState(false);
  
  function start() {
  setDataChanged(true)
  }
  function stop() {
  setDataChanged(false)
  }
  </code></pre>
  <p>In JSX:</p>
  <pre><code>&lt;Prompt title=&quot;hello&quot; when={isDataChanged} 
                message={()=&gt;&quot;The Inspection will be Stopped. Do you want to go Anyways?&quot;}&gt;&lt;/Prompt&gt;
  </code></pre>