Question

使用onEnter挂钩和replaceState将用户重定向到其他网页时出现此问题。

假设我有一个只登录用户可以看到的页面。此页面/路由位于onEnter挂钩内，它将检查用户是否已登录。如果用户未登录，则会将其重定向到登录页面（使用replaceState功能）。当注销用户尝试进入受保护路由时，立即（眨眼）看到受保护页面，然后重定向到登录页面。

如何避免这种眨眼？

修改当我使用callback钩子提供的onEnter时会发生这种情况。

Answer 1

我遇到过类似的情况。我使用<Redirect/>组件解决了这个问题。

const Protected = () => {
    <div>Protected Page</div>
}

const RenderProtected = ({ isLoggedin }) -> (
    {isLoggedIn ? <Protected /> : <Redirect to="/login" />}
);

<Route exact path="/protected" component={RenderProtected} {...props} />

不确定这是否是大多数人关注的内容。我在阅读this blog by Tyler McGinnis后开始使用该组件。我刚刚开始挖掘反应。当然，我将isLoggedIn标志存储在组件梯形图中的某处，并作为道具传递给子组件。我知道它太多了，但我现在不想使用Flux ..

如何使用onEnter钩子避免闪烁/跳转？

1 个答案: