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不存在，你将重定向到Login组件。但是这里存在技术故障。

每次重新安装组件时都会初始化组件的状态，当您从Login组件重定向到App组件时，App组件中的状态将再次初始化为null，这就是您再次重定向到Login的原因。 / p>

您需要做的是

将uid存储在localStorage中并从App组件中的那里读取

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

Answer 2

因为当它重定向到/ login时，它来自＆＃39; /＆＃39;即应用程序组件和渲染函数再次调用，它确实重定向到/ login并循环进入循环。因此，要防止此更新登录组件中的状态并将其传递给父组件。

因此，如果您没有使用像redux这样的任何商店，只需在window.localStorage中设置状态。

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

2 个答案: