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

Question

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

抛出的错误是:

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

最后一个约束是我需要 uid 为 null，直到从 LoginScreen 组件触发登录事件之后。因此，用户需要能够在顶级 App 组件中查看具有 null 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>
    );
  }
}

我希望我很好地解释了情况。提前致谢!

Answer 1

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

每次再次安装组件时，组件的状态都会初始化，并且当您从登录组件重定向到应用程序组件时，应用程序组件中的状态再次初始化为 null，这就是您再次重定向到登录的原因。

你需要做的是

要么将 uid 存储在 localStorage 中并从应用程序组件中读取它

或者，如果您使用的是 Redux，则将 uid 存储在全局存储中，并获取 将其存储在应用程序组件。