React Page 在根据 redux 值重定向之前闪烁

Posted 2023-03-24

【中文标题】React Page 在根据 redux 值重定向之前闪烁

【英文标题】：React Page flickers after before it redirects based on redux value

【发布时间】：2021-02-07 03:25:00

【问题描述】：

我有一个登录页面，我所做的是使用 redux 将 state 映射到 props 以检查用户 state 对象是否存在。如果是这样，它应该从它重定向到“/”。我创建了一个名为PublicRoute 的组件，如下所示：

App.js

// user is loaded via this.props from redux when I map state to props.
const  user  = this.props
const isLoggedIn = _.isEmpty(user) ? false : true

<PublicRoute 
   path="/login" 
   exact
   isLoggedIn=isLoggedIn
   component=Login
/>

PublicRoute.js 组件

const PublicRoute = ( isLoggedIn, ...props ) => 
    return isLoggedIn ? <Redirect to="/" /> : <Route ...props />
;

export default PublicRoute

当我登录并进行测试时会发生什么，我转到“/login”，即使它确实重定向到“/”，登录页面仍然会呈现一瞬间，即使它在 else 中。我知道这是因为 redux 一瞬间没有加载用户对象，我该怎么办？

【参考方案1】：

使用用户对象的三种状态。

未定义：- 初始状态，页面已开始加载。 null:- 如果用户没有登录。 值：- 如果用户已登录。

通过这种方式，您可以了解用户对象的状态并进行适当的渲染。 例如：-

if (user === undefined) return null;

if (user === null) return <Login />

return <Components />

【讨论】：

那么这三个条件应该进入我的PublicRoute？并且返回的 应该是 正确的吗？