每4-6秒响应网页刷新一次。

Question

我甚至不确定我的代码中的哪一部分会显示，因为这是一个非常普遍的错误，但是每次我npm start我的React页面它都会自动从主页转到身份验证仪表板并开始刷新。

我猜这是一个反应路由器的问题，但我也不太确定？

这就是我的App.js应用程序组件当前的样子，它具有主要的路由功能。

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>
  );
}

这就是我的Home.js主组件文件的样子

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

更改路由定义如下：

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