React webpage refreshing every 4-6 seconds

Question

I'm not really sure even what part of my code to show because it's such a general error, but everytime I npm start my React webpage it automatically goes from the home page to the authentication dashboard and starts refreshing.

I'm guessing it's a problem with React Router but I'm not really sure about this either?

This is how my App.js App component currently looks, which has the main Route functionality.

const App = () => {
  const [auth, setAuth] = useState(false);

  useEffect(() => {
    localStorage.setItem("user", auth);
  }, [auth]);

  return (
    <div className="landing" style={{zIndex:0, margin:"0px", position:"fixed"}}>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />


        {!auth && (
          <Route
            path="/auth"
            element={
              <Auth authenticate={(val) => setAuth(val === 1 ? true : false)} />
            }
          />
        )}

        {auth && (
          <>
            <Route path="/dashboard" element={<Dashboard />} />
          </>
        )}
        <Route
          path="*"
          element={<Navigate to={auth ? "/dashboard" : "/auth"} />}
        />
      </Routes>
    </div>
  );
}

And this is how my Home.js Home component file looks like

function Home() {
  return (
    <div className="main">
    
      <div className="landingImageDiv">
        <img src={ligaLogo} alt="uchisvg" className="landingImage" />
        <div id="fade" className="linkDiv topMargin5">
          
          <div>
            <Link to="/about" className="popupLink">
              <span className="hover">[About]</span>
            </Link>
          </div>

          <div> 
            <Link to="/auth" className="popupLink">
              <span className="hover">[Talent Network]</span>
            </Link>
          </div> 

          <div> 
            {/* Format to request access to platform */}
            <a href="https://forms.gle/vKzq5M9n56oKKV5DA" className="popupLink">
              <span className="hover">[Request RSO Onboarding]</span>
            </a>
          </div>  

        </div>

      </div>
      <div className="landing" id="fade">
        <div style={{ zIndex: 5, position: "relative" }}></div>
      </div> 

    </div>
  );
}

Answer 1

Change your route definition as follows:

{
    !auth ? (
        <Route
            path="/auth"
            element={
                <Auth authenticate={(val) => setAuth(val === 1 ? true : false)} />
            }
        />
    ) : (
        <>
            <Route path="/dashboard" element={<Dashboard />} />
        </>
    );
}