时间戳

首页 > 解决方案 > 在页面上和路由时显示动画

reactjs - 在页面上和路由时显示动画

问题描述

我有一个 React 应用程序，当用户单击提交按钮以等待服务调用 PUT 完成时，它会显示加载屏幕。然后，它们被路由到下一页。在下一页上，它会在等待服务调用 GET 完成时显示另一个加载屏幕。

目前我有一个启动和停止这个动画的减速器。唯一的问题是，它永远不会进入下一页，因为我在路由上显示动画组件。我需要在路由时显示动画。

我有一个名为 Interstitial 的自定义组件（我的动画组件）。我怎样才能在主页上显示这个动画，通过页面路由，到下一页，所以它看起来像一个连续的加载屏幕，而不是三个单独的加载屏幕。

render() {
    if (isWaiting) {
        return <Interstitial />; //this is my animation
    } else {
        return (
            <Template>
                    <Switch>
                        <Route path="/" exact component={Home} />
                        <Route path="/verify-changes" component={VerifyChanges} />
                        <Route path="/confirm" component={Confirm} />
                    </Switch>
            </Template>
        );
    }
}

标签： reactjsreact-routertransition

解决方案

通过在 return 内部添加 switch 语句而不是作为第二个 return 解决了这个问题。

{this.props.isWaiting ? <Interstitial /> : null}

推荐阅读