Блог

Я работаю над проектом, в котором мне нужна анимация перехода страницы, и, похоже, не могу найти способ отложить немедленное изменение страницы компонентом ссылки маршрутизатора React. Начало анимации сдвигает сетку над этой страницей на cover, затем, как только страница загружена, должна отображаться выбранная страница.

В настоящее время это делается путем установки значения 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 amp;amp; (
                    <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>
        );
    }
}
  

Грубый код, прошу прощения за это!

Есть ли способ отложить отображение маршрута до того, как будет загружена следующая страница? Кажется, я не могу найти чистый способ сделать это и был бы признателен за любую помощь.

Заранее благодарю вас.