路由守卫
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>;