Как вызывать функцию до изменения маршрута и когда функция завершается, менять маршрут

Question

Интересно, как вызывать какую-то функцию, когда кликаешь на:

<Link to="/">page</Link>

и вызовите некоторую функцию перед изменением маршрута.

например

Я нахожусь в компоненте A. Я щелкаю по какой-то ссылке для перехода к Компоненту B. Маршрут изменится, но перед изменением маршрута я не хочу воспроизводить анимацию javascript и не буду ждать анимации, когда закончится, затем маршрут перейдет к компонент Б.

Я использую реагирующий маршрутизатор-4

Answer 1

Вы можете сделать это, вызвав функцию при нажатии на ссылку

<Button
  onClick={
  () => {
      this.animateAndExit()
     }
  }
></Button>

и ваша функция будет такой

const animateAndExit = () => {
animationFunction()
setTimeout(redirectionFunction, timeToWait)
}

Answer 2

Ранее я создал эффект перехода карусели, направляя все мои пути к одному и тому же компоненту карусели, и в карусели каждый слайд представлял страницу.При изменении пути расположения компонент карусели проверит путь и перейдет к следующему компоненту.Подобную идею можно использовать для любого перехода.

<Switch>
    <Route exact path='/' component={Home} />
    <Route exact path='/history' component={Home} />
    <Redirect to="/" />
</Switch>

public render() {
    let locationPath = this.state.locationPath.toLowerCase();

    return (
        <div style={{ height: "100%" }} id="pageCarousel" className="carousel slide" data-ride="carousel" data-interval={false} >
            <div style={{ height: "100%" }} className="carousel-inner" >
                <div className={"carousel-item summary" + (locationPath == "/" ? " active" : "")}>
                    <div className="overlay" />
                    <div className="pageContainer">
                        <Summary />
                    </div>
                </div>
                <div className={"carousel-item history" + (locationPath == "/history" ? " active" : "")}>
                    <div className="overlay" />
                    <div className="pageContainer">
                        <History />
                    </div>
                </div>
            </div>
        </div>
    );
}

Answer 3

Вместо использования <Link /> вы можете программно изменить маршрут:

<Button
  onClick={
  () => {
      this.myCustomFunction(); // Execute whatever code you need
      this.props.history.push('/');
     }
  }
></Button>

Ссылка: https://tylermcginnis.com/react-router-programmatically-navigate/