如何在路由之前调用函数以及在函数完成时更改路由

Question

我想知道单击时如何调用某些函数：

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

并在路由更改之前调用一些函数。

例如

我在组件A中，我正在单击某个链接前往组件B。路由将更改，但在路由更改之前，我不想播放一些javascript动画，也不想等待动画将完成，然后路由将前往组件B。

我正在使用react-router-4

Answer 1

您可以通过编程方式更改路由，而不是使用<Link />：

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

参考：https://tylermcginnis.com/react-router-programmatically-navigate/

Answer 2

我之前通过将所有路径路由到相同的carousel组件创建了一个carousel过渡效果，在carousel中，每个幻灯片代表一个页面。当位置路径改变时，轮播组件将检查路径并滑入下一个组件。类似的想法可以用于任何过渡。

<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

您可以通过在单击链接时调用函数来执行此操作

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

您的函数将如下所示

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