路由守卫

React Router 没有提供专门的路由守卫功能,但不代表不能完成进入路由前的判断和离开路由之前的处理。

对于离开路由之前的处理,可以通过组件的componentWillUnmount()生命周期方法或者useEffect()返回的函数进行处理。

而对于进入路由之前的判断,例如先判断用户是否登录再决定进入路由,可以通过对 Route 组件进行包装,结合 Route 组件的render属性来完成。例如可参考以下示例。

const AuthRoute = ({ component: Component, ...rest }) => {
  if (user.isLoggedIn) {
    return <Route {...rest} component={component} />;
  } else {
    return <Redirect to="/login" />;
  }
};

<Router>
  <AuthRoute path="/glance" component={Glance} />
</Router>;