延迟React Router Link过渡以添加自定义动画组件

问题描述

我正在一个需要页面过渡动画发生且无法找到延迟React Router的Link组件立即更改页面的方法的项目中。动画的开头会在该页面上移动网格以覆盖，然后在页面加载后应显示所选页面。

当前完成此操作的方式是通过在链接单击上将isLoading设置为true，然后在安装下一个组件时将isLoading设置为false。除当前页面在初始屏幕遮盖期间未停留在屏幕上之外，此方法可以正常工作。

class tests extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isLoading: true,isDoneLoading: false,};
    }

    changeIsLoading = (newVal) => {
        this.setState({ isLoading: newVal });
    };

    changeIsDoneLoading = (newVal) => {
        this.setState({ isDoneLoading: newVal });
    };

    navLoading = () => {
        this.setState({ isDoneLoading: false,isLoading: true });
    };

    render() {
        return (
            <div className='test'>
                <Navbar navLoading={this.navLoading} />
                {!this.state.isDoneLoading && (
                    <LoadingScreen
                        isLoading={this.state.isLoading}
                        isDoneLoading={this.state.isDoneLoading}
                        changeIsDoneLoading={this.changeIsDoneLoading}
                    />
                )}
                <Route
                    render={({ location }) => (
                        <Switch>
                            <Route
                                exact
                                path='/page1'
                                render={(routeProps) => (
                                    <Page1
                                        isLoading={this.state.isLoading}
                                        changeIsLoading={this.changeIsLoading}
                                    />
                                )}
                            />
                            <Route
                                exact
                                path='/page2'
                                render={(routeProps) => (
                                    <Page2
                                        isLoading={this.state.isLoading}
                                        changeLoading={this.changeLoading}
                                    />
                                )}
                            />
                        </Switch>
                    )}
                />
            </div>
        );
    }
}

粗糙的代码，对此感到抱歉！

有没有一种方法可以延迟路由在已加载下一页之前出现？我似乎找不到一种干净的方法，希望能得到您的帮助。

谢谢。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）