React Router v4 - 如何防止重定向循环？答案

【问题标题】：React Router v4 - How to prevent redirect loops?React Router v4 - 如何防止重定向循环？
【发布时间】：2017-11-17 07:28:30
【问题描述】：

如果状态的 uid 为空，我想要完成的是让我的 App 组件重定向到“/login”路由。重定向工作正常，如果 uid 为空，则始终会将您重定向到“/login”，但问题是，一旦您在“/login”路由上，它就不会停止重定向。

抛出的错误是：

警告：您尝试重定向到您当前所在的同一路线：“/login”

最后一个约束是我需要 uid 为空，直到从 LoginScreen 组件触发登录事件之后。因此，用户需要能够在顶级App 组件中查看具有空uid 的“/login”路由。

我的代码如下：

class App extends Component {
  constructor() {
    super();
    this.state = {
      uid: null
    }
  }
  render() {
    // Redirect to login if no user
    if (this.state.uid == null) {
      return (
        <Router>
          <Redirect to="/login" />
        </Router>
      );
    }

    return (
      <Router>
        <div>
          <Route path="/login" component={LoginScreen} />
          <Route path="/dashboard" component={DashboardScreen} />
          <Route path="/profile" component={ProfileScreen} />
        </div>
      </Router>
    );
  }
}

我希望我能很好地解释情况。提前致谢！

【问题讨论】：

标签： reactjs react-router

【解决方案1】：

正如您提到的，您已将 uid 存储在 App 组件状态中，如果 uid 不存在，您将重定向到登录组件。但是这里有一个技术故障。

每次再次挂载组件时都会初始化组件的状态，当您从 Login 组件重定向到 App 组件时，您在 App 组件中的状态再次初始化为 null，这就是您再次重定向到 Login 的原因。

你需要做的是

要么将 uid 存储在 localStorage 中，然后在 App 组件中从那里读取它

或如果您使用的是Redux，则将uid 存储在全局存储中，并将fetch 存储在App 组件中。

【讨论】：

【解决方案2】：

这是因为当它重定向到 /login 时，它从 '/' 即 App 组件和渲染函数调用再次确实重定向到 /login 并进入循环等等。因此，为了防止这种更新登录组件中的状态并将其传递给父组件。

所以如果你没有使用任何像 redux 这样的 store，只需在 window.localStorage 中设置状态即可。

【讨论】：