title: React router dom navigate not working in useEffect for React 16, 17
body: <p>So I discovered that calling <strong>navigate('/a-path')</strong> from the <strong>useNavigate()</strong> hook in react-router-dom doesn't work in my project. <strong>navigate</strong> doesn't throw any error, just doesn't navigate. Dispite calling it inside <strong>useEffect</strong> my Dev Tools logs a warning as if it was not in a <strong>useEffect</strong>. This I discovered using React 17 and showed it was the same for 16. In React 18 I still get the warning message, but it does the navigation!</p>
  <p>So I start my app (React 16 and 17 now), go to /run in browser and nothing happens. I will refresh, nothing happens. I will make an edit in VSCode and save causing a hot reload and <strong>then</strong> it navigates! All the time &quot;Manual run&quot; works as expected.</p>
  <p>There must be something about <strong>run()</strong> going off too early in some lifecycle.</p>
  <p>Why doesn't the useEffect in Runner make the call to run wait until everything seems ready?</p>
  <p><strong>RunnerPage.js</strong>:</p>
  <pre><code>function Runner({ run }) {
    useEffect(() =&gt; {
      run()
    }, [])
  
    return &lt;div onClick={run}&gt;Manual run&lt;/div&gt;
  }
  
  function RunnerPage() { 
    const navigate = useNavigate()
  
  return (
      &lt;Runner run={() =&gt; navigate('/goal')} /&gt;
    )
  }
  </code></pre>
  <p><strong>App.js:</strong></p>
  <pre><code>function App() {
    return (
      &lt;&gt;
        &lt;h1&gt;Copy App&lt;/h1&gt;
        &lt;Routes&gt;
          &lt;Route path='/run' element={&lt;RunnerPage /&gt;} /&gt;
          &lt;Route path='/goal' element={&lt;GoalPage /&gt;} /&gt;
        &lt;/Routes&gt;
      &lt;/&gt;
    )
  }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/RMX8Z.png" rel="nofollow noreferrer">Chrome Dev Tools warning, React 18</a></p>
  <p>I made a GitHub repo for you to try it. Folders 16 and 17 don't work. 18 does.
  Run <strong>npm install</strong> then <strong>npm start</strong>, then go to /run and you'll see.</p>
  <p><a href="https://github.com/PelicanQ/navigate-debug" rel="nofollow noreferrer">GitHub Repo </a><a href="https://github.com/PelicanQ/navigate-debug" rel="nofollow noreferrer">https://github.com/PelicanQ/navigate-debug</a></p>
  <p>I made the three versions by just changing the <strong>react</strong> and <strong>react-dom</strong> versions in package.json between ^16.0.0 ^17.0.0 and ^18.0.0 and re-installing.</p>