title: react router 6 - redirect only once the first time app loads
body: <p>Below is my <code>App.js</code> code and I am trying to redirect the app to <code>'/companies'</code> (<code>Companies</code> element) only ONCE on the first time the app loads. Right now, it is not redirecting/navigating... Is there a better way to accomplish this?</p>
  <p><strong>App.js</strong></p>
  <pre><code>import React, { useEffect, useState } from 'react';
  import { Routes, Route, BrowserRouter as Router, Navigate } from 'react-router-dom';
  import { port } from './variables/global';
  import &quot;./assets/css/mdb.css&quot;;
  
  import Companies from './components/Companies';
  import Company from './components/Company';
  // import Settings from './components/UserSettings';
  import NavbarDev from './components/NavbarDev';
  
  import WebFont from 'webfontloader';
  
  WebFont.load({
    google: {
      families: ['Barlow', 'Playfair Display', 'Overpass']
    }
  });
  
  function CompaniesRouter() {
    return (
      &lt;Routes&gt;
        &lt;Route path=&quot;/&quot; element={&lt;Companies /&gt;} /&gt;
        &lt;Route path=&quot;/last&quot; element={&lt;Company /&gt;} /&gt;
      &lt;/Routes&gt;
    )
  }
  
  function Test() {
    const [firstRender, setFirstRender] = useState(true);
  
    let el = (
      &lt;React.Fragment&gt;
        &lt;h1&gt;hellooooo&lt;/h1&gt;
      &lt;/React.Fragment&gt;
    )
  
    // redirect only once
    useEffect(() =&gt; {
      if (process.env.NODE_ENV === 'development' &amp;&amp; firstRender) {
        el = &lt;Navigate replace to='/companies' /&gt;
        setFirstRender(false)
      }
    }, [firstRender])
  
    return el
  }
  
  export default ({ history }) =&gt; {
    console.log('app', history.location.pathname)
    let whatPort = location.port;
  
    return (
      &lt;Router history={history}&gt;
        {(process.env.NODE_ENV === 'development' &amp;&amp; whatPort === port.toString()) ? &lt;NavbarDev /&gt; : ''}
        &lt;Routes&gt;
          &lt;Route path=&quot;/companies/*&quot; element={&lt;CompaniesRouter /&gt;} /&gt;
          &lt;Route path=&quot;/user/settings&quot; element={&lt;Companies /&gt;} /&gt;
          &lt;Route path='/' element={&lt;Test /&gt;} /&gt;
          &lt;Route
            path=&quot;*&quot;
            element={&lt;Navigate to=&quot;/&quot; replace /&gt;}
          /&gt;
        &lt;/Routes&gt;
      &lt;/Router&gt;
    );
  };
  </code></pre>