react用高阶组件实现路由守卫

react-router不像vue-router一样有很多钩子函数，可以做路由守卫。想实现路由守卫，可以用高阶组件来实现。

@connect(state => ({ isLogin: state.user.isLogin }))
class PrivateRoute extends Component {
    render() {
        const { isLogin, component: Component, ...rest } = this.props;
        ///Route组件里render和Component二选一
        return (
            <Route
                {...rest}
                //props 包含值：history，location，match
                //login 页面可以通过 this.props.location.state.from知道是哪个页面跳转过来的,方便登录后直接跳转
                render={props =>
                    isLogin ? (
                        <Component {...props} />
                    ) : (
                            <Redirect
                                to={{
                                    pathname: "/login",
                                    state: { from: props.location.pathname }
                                }}
                            />
                        )
                }
            />
        );
    }
}

 

转载于:https://www.cnblogs.com/superlizhao/p/11551901.html