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

IT技术 reactjs react-router
2021-05-24 01:48:34

App如果状态的 uid 为空,我想要完成的是让我的组件重定向到“/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>
    );
  }
}

我希望我能很好地说明情况。提前致谢!

2个回答

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

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

你需要做的是

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

或者, 如果您正在使用Redux,则将其存储uid在全局存储中并将fetch存储在 App 组件中。

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

因此,如果您不使用任何类似 redux 的存储,只需在 window.localStorage 中设置状态即可。