react-router-dom PrivateRoute 与 redux 无限加载答案

【问题标题】：react-router-dom PrivateRoute with redux endless loadingreact-router-dom PrivateRoute 与 redux 无限加载
【发布时间】：2020-06-06 06:02:01
【问题描述】：

在授权开始前重新加载PrivateRoute重定向到/login，因为初始redux状态是false 为他们俩。

这些是来自路由器的日志：

PrivateRoute.js:16 正在加载：false isAuthenticated：false
PrivateRoute.js:16 正在加载：true isAuthenticated：false
PrivateRoute.js:16 正在加载：false isAuthenticated：true

它工作正常，我只需要一种方法来区分初始状态和未经过身份验证的用户。

我的尝试

我的第一个想法是将 isLoading 的初始状态更改为 true：
奇怪的行为。页面根本不加载。甚至整个 App 组件都无法挂载，所以我真的不知道发生了什么。
将 isAuthenticated 的初始状态更改为 null 并从

isLoading ?

到

isAuthenticated === null ?

（下面的路由器）

在需要 PrivateRoute 之前，一切似乎都很好。当调试器处于 if 语句时，一切都会再次冻结。

这是我找到的 Here 的 PrivateRoute 组件

import React from "react";
import { Route, Redirect } from "react-router-dom";
import { connect } from "react-redux";
import Spinner from "../../components/Spinner";

const PrivateRoute = ({
  component: Component,
  isLoading,
  isAuthenticated,
  ...rest
}) => (
  <Route
    {...rest}
    render={props =>
      isLoading ? (
        <Spinner />
      ) : isAuthenticated ? (
        <Component {...props} />
      ) : (
        <Redirect
          to={{ pathname: "/login", state: { from: props.location } }}
        />
      )
    }
  />
);

const mapStateToProps = state => ({
  isLoading: state.auth.isLoading,
  isAuthenticated: state.auth.isAuthenticated
});

export default connect(mapStateToProps)(PrivateRoute);

【问题讨论】：

这行不通，因为当新状态通过 props 进入时，使用这样的 render prop 不会触发更新，因为 react 无法检测到 Route 的 render prop 的变化，因为它仍然指向相同的功能。所以根据反应的差异没有任何改变。
"它工作正常，我只需要一种方法来区分初始状态和未经过身份验证的用户。"你在redux中设置isAuthenticated吗？您为什么要区分初始状态和未经过身份验证的用户？
听起来尝试#1 是您应该追求的目标。代码没有问题，只是您的实现。弄清楚为什么 #1 不起作用，这听起来像是您真正想做的事情。真正的问题是，如果 isAuthenticated 和 isLoading 可以同时为假-您别无选择，只能重定向，所以这在逻辑上没有任何问题。（另外，我是否可以建议 isAuthenticating 而不是 isLoading 以明确正在发生的事情）。
@deowk 我在编辑中添加了整个代码。组件连接到 store 并触发状态更新
@displacedtexan 是的，我通过 redux 设置 isAuthenticated。需要区分的是，初始状态与未授权用户相同，并且 PrivateRoute 在用户开始加载之前重定向到 /login

标签： reactjs react-redux react-router-dom

【解决方案1】：

我花了大约 5 个小时才意识到我忘记在 Spinner 中导入一些东西... 谢谢大家的努力

【讨论】：