React Router 条件路由组件闪烁/闪烁

Question

我试图仅在用户登录时才呈现某些组件。用户是否登录由存储在 redux 存储中的当前用户对象确定。问题是包含路由的主 App 组件在其第一次渲染调用之前没有立即将当前用户对象接收到它的 props。因此，它重定向到登录页面。一两秒后，主 App 组件最终将对象接收到它的 props 中，并重定向到它最初应该有的位置。

我试图将条件移到实际组件的渲染方法中，但该组件在其第一次渲染之前仍然没有从 redux 存储接收用户对象作为道具，导致登录页面相同的“闪烁” .

class App extends React.Component {
    constructor() {
        super();
    }

    unsubscribeFromAuth = null;

    async componentDidMount(): void {
        this.unsubscribeFromAuth = await auth.onAuthStateChanged(async userAuth => {
            if (userAuth) {
                await this.props.setCurrentUser(userAuth);
            }
        })
    }

    componentWillUnmount(): void {
        this.unsubscribeFromAuth();
    }

    render() {
        return (
            <div>
                <Navbar />
                <BrowserRouter history={history}>
                    <div>
                    <Switch>
                        <Route exact={true} path={'/register'} render={() => this.props.currentUser
                                                                            ? <Profile/>
                                                                            : <Register/>}/>
                        <Route exact={true} path={'/profile'} render={() => this.props.currentUser
                            ? <Profile/>
                            : <Login/>}/>
                        <Route exact={true} path={'/login'} render={() => this.props.currentUser
                                                                        ? <Events/>
                                                                        : <Login/>}/>
                        <Route exact={true} path={'/events'} render={() => this.props.currentUser
                                                                         ? <Events/> : <Login/>}/>
                        <Route exact={true} path={'/my_events'} render={() => this.props.currentUser
                                                                            ? <MyEvents/> : <Login/>}/>
                        <Route exact={true} path={'/new_event'} render={() => this.props.currentUser
                                                                            ? <NewEvent/> : <Login/>}/>
                        <Route exact={true} path={'/edit_event'} render={() => this.props.currentUser
                                                                        ? <EventEdit/>
                                                                        : <Login/>}/>
                        <Route exact={true} path={'/apply-to-event'} render={() => this.props.currentUser
                                                                                 ? <ApplyToEvent/>
                                                                                 : <Login/>}/>
                        <Route path={'/'} render={() => this.props.currentUser
                            ? <Events/>
                            : <Login/>}/>
                    </Switch>
                    </div>
                </BrowserRouter>
            </div>
        );
    }
}

const mapStateToProps = ({ user }) => ({
    currentUser: user.currentUser
});

const mapDispatchToProps = (dispatch) => ({
    setCurrentUser: async user => await dispatch(setCurrentUser(user))
});

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(App);

我想找到一种方法来呈现组件，而不会出现登录组件的闪烁/闪烁。

Answer 1

如果我正确理解了您的代码，那么问题似乎不是路由器代码而是 redux 身份验证状态的逻辑。

首先； componentDidMount 总是在第一次渲染后工作。所以你永远无法在 componentDidMount 中实现你想要的。您将永远错过第一次渲染。它将记住身份验证状态，无需获取到服务器即可知道它。

如果你想在第一次渲染时知道 auth 信息，你应该使用 localStorage 或 asyncStorage(forReact Native)。以便您在第一次渲染时就知道。

如果你坚持不使用localStorage；在更新身份验证状态之前，您可能会显示一些加载屏幕。所以 react 路由器将没有机会路由到登录页面并返回。