Javascript 如何根据条件和重复使用反应路线？

我正在努力用React Redux和Routes创建身份验证

根据负责身份验证的变量，用户可以获得一组特定的路由。但在初始加载时，当变量尚未从redux存储区接收到值时，将为未登录的用户显示路由，即注册页面，然后仅显示必要的页面

事实证明，每次更新注册页面时都会闪烁

routes.js中的代码：

export const RotesPage=（{isAuthenticated}）=>{
如果（未经验证）{
返回(
);
}
如果（！已验证）{
返回(
);
}
};

App.js中的代码：

import React，{useffect}来自“React”；
从“react Router dom”导入{BrowserRouter as Router}；
从“react-redux”导入{useSelector，useDispatch}；
从“/actions/authAction”导入{loadUser}；
从“/layouts/components/AppNavbar”导入{AppNavbar}”；
从“/routes”导入{RotesPage}；
常量应用=（）=>{
const dispatch=usedpatch（）；
const auth=useSelector（（state）=>state.auth）；
const isAuthenticated=auth.isAuthenticated；
useffect（（）=>{
分派（loadUser（））；
}，[发送]；
返回(
{已验证&&}
);
};
导出默认应用程序；

我怎样才能修好它

另外，如果我描述得不好，我很抱歉，因为我不仅在学习编程语言，也在学习英语

这是我在这里的第一个问题

---

提前感谢=）

在您的redux状态集

isLoading

变量中，一旦您获得验证数据，该变量最初将为

true

，将其设置为

false

然后在应用程序中，您可以执行以下操作：

  const auth = useSelector((state) => state.auth);
  const isAuthenticated = auth.isAuthenticated;
  const isLoading = auth.isLoading;

<Router>
  {isLoading ? (
    <div>Loading...</div>
  ): (
    <>
      {isAuthenticated && <AppNavbar />}
      <RotesPage isAuthenticated={isAuthenticated} />
    </>
  )}
</Router>

const auth=useSelector（（state）=>state.auth）；
const isAuthenticated=auth.isAuthenticated；
const isLoading=auth.isLoading；
{孤岛加载(
加载。。。
): (
{已验证&&}
)}

import React, { useEffect } from "react";
import { BrowserRouter as Router } from "react-router-dom";
import { useSelector, useDispatch } from "react-redux";
import { loadUser } from "./actions/authAction"; 
import { AppNavbar } from "./layouts/components/AppNavbar";
import { RotesPage } from "./routes";

const App = () => {
  const dispatch = useDispatch(); 
  const auth = useSelector((state) => state.auth);
  const isAuthenticated = auth.isAuthenticated;

  useEffect(() => {
    dispatch(loadUser());
  }, [dispatch]);

  return (
    <Router>
      {isAuthenticated && <AppNavbar />}
      <RotesPage isAuthenticated={isAuthenticated} />
    </Router>
  );
};

export default App;

  const auth = useSelector((state) => state.auth);
  const isAuthenticated = auth.isAuthenticated;
  const isLoading = auth.isLoading;

<Router>
  {isLoading ? (
    <div>Loading...</div>
  ): (
    <>
      {isAuthenticated && <AppNavbar />}
      <RotesPage isAuthenticated={isAuthenticated} />
    </>
  )}
</Router>