react-router - 如何使用 onEnter 钩子(Hook)避免眨眼/跳跃转换？

Question

使用 onEnter Hook 和 replaceState 将用户重定向到另一个页面时遇到此问题。

假设我有一个只有登录用户才能看到的页面。该页面/路由位于 onEnter Hook 内，它将检查用户是否登录。如果用户未登录，则会重定向到登录页面(使用 replaceState 函数)。当注销的用户尝试进入 protected 路线时，会立即(眨眼)看到 protected 页面，然后重定向到登录页面。

如何避免这种眨眼？

编辑:当我使用 onEnter Hook 提供的 callback 时，就会发生这种情况。

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 后开始使用该组件。我刚刚开始研究 React。当然，我存储的是isLoggedIn在组件梯子的某个位置进行标记，并作为 props 传递给子组件。我知道这太多了，但我现在尝试不使用 Flux..