如何在有条件和Redux的情况下使用React Routes

Question

我很难用React Redux和Routes创建身份验证。

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

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

routes.js:中的代码

export const RotesPage = ({ isAuthenticated }) => {
if (isAuthenticated) {
return (
<div>
<Switch>
<Route path="/" exact>
<MainPage />
</Route>
<Route path="/schedule" exact>
<SchedulePage />
</Route>
<Route path="/tasks" exact>
<TasksPage />
</Route>
<Route path="/money" exact>
<MoneyPage />
</Route>
<Redirect to="/" />
</Switch>
</div>
);
}
if (!isAuthenticated) {
return (
<Switch>
<Route path="/login" exact>
<LoginPage />
</Route>
<Route path="/register" exact>
<RegisterPage />
</Route>
<Redirect to="/login" />
</Switch>
);
}
};

App.js中的代码：

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;

我该怎么修？

附言：很抱歉我说得不好，因为我不仅在学编程语言，还学英语。

附言：这是我在这里的第一个问题。

提前感谢=(

Answer 1

在您的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>