Javascript 带有React Redux的专用路由

我已经用react、redux和react路由器构建了一个CRUD应用程序。如果页面从PrivateRoutes刷新，应用程序将重定向到

/login

。我正在更新用户的登录状态，方法是从

localStorage

获取数据，并发送操作以更新应用程序组件中的redux

App.js

const updateLoginStatus = () => {
  if (checkIfUserLoggedIn()) {
    const user = getLoginInitialState();
    dispatch(updateLoginInitialState(user));
  }
};

useEffect(() => {
  updateLoginStatus();
}, [login.isLoggedIn]);

应用程序内路由组件

<Router>
  <Switch>
    <Route exact path="/" component={Home} />
    <Route exact path="/login" component={Login} />
    <Route exact path="/register" component={Register} />
    <Route exact path="/logout" component={Logout}></Route>
    <PrivateRoute exact path="/expenses" component={ListExpensesComponent} />
    <PrivateRoute exact path="/expenses/add-expense" component={AddExpenseComponent} />
    <PrivateRoute
      exact
      path="/expenses/edit-expense/:expense_id"
      component={EditExpenseComponent}
    />
  </Switch>
</Router>;

;

privaterout.js

const login = useSelector((state) => state.loginReducer);
return (
  <div>
    <Route
      {...rest}
      render={(props) => {
        if (!login.isLoggedIn) {
          return <Redirect to="/login" />;
        }
        return <Component {...props} />;
      }}></Route>
  </div>
);

const login=useSelector（（state）=>state.loginReducer）；
返回(
{
如果（！login.isLoggedIn）{
返回；
}
返回；
}}>
);

我找到的一个解决办法是

• 在login

  UPDATE\u login\u REQUEST

  中添加一个操作，并在login Reducer中添加

  loading

  属性，并设置

  loading:true

  。因此，显示
  ，直到更新登录状态

我们还有别的办法处理吗？提前谢谢