如何使<route>组件从商店观察登录状态?

时间:2019-01-06 10:25:01

标签: reactjs react-router mobx mobx-react

如果登录状态更改为false,如何使高阶PrivateRoute组件从mobx存储中观察我的登录状态并呈现重定向组件?

我正在使用react-router-dom来管理我的应用程序路由。为了拥有只能由登录用户访问的私有路由,我将标准Route组件包装在一个无状态的PrivateRoute组件中,该组件在其渲染方法中检查mobx存储的LoggedIn状态变量。根据此已登录状态(已变为可观察状态),专用路由将呈现重定向或要呈现的组件。现在,我想使该组件成为storelogIn状态的观察者,并将其包装在mobx-reacts观察者函数中。

我的PrivateRoute组件

export const PrivateRoute = observer(({ store, component: Component, ...rest }) => (
    <Route
        {...rest}
        render={props =>
            store.status ? <Component {...props} /> : <Redirect to="/login" />
        }
    />
));

我想要实现的是在状态更改为false时立即将用户重定向到登录页面,但是我现在尝试如何使用它。

0 个答案:

没有答案