title: You should call navigate() in a React.useEffect(), not when your component is first rendered
body: <p>I am new to ReactJS. On Initial Load of Page, I want to check if the <code>state</code> is null, then I want to redirect to another <code>login Page</code></p>
  <p>Here's the Component Code:</p>
  <pre><code>export default function Addblousesalwar() {
    const navigate = useNavigate();
    const { state } = useLocation();
    console.log(state)   //null
    if(state === null || state === undefined){
      navigate(&quot;/login&quot;)
    }
  </code></pre>
  <p>But It shows error:</p>
  <pre><code>You should call navigate() in a React.useEffect(), not when your component is first rendered.
  </code></pre>
  <p>I tried via useEffect also. But the useEffect doesn't get executed.</p>
  <pre><code>useEffect(() =&gt; {
      if(state === null || state === undefined){
        navigate(&quot;/&quot;)
      }
    }, []);
  
  
  
  useEffect(() =&gt; {
      if(state === null || state === undefined){
        navigate(&quot;/&quot;)
      }
    }, []);
  </code></pre>
  <p>I tried this also</p>
  <pre><code> useEffect(() =&gt; {
      if(state === null || state === undefined){
        navigate(&quot;/&quot;)
      }
    }, [state]);
  </code></pre>
  <p>This useeffect also not triggering
  Please Help me with some solutions</p>