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

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

<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)
}

路由更改前如何调用函数以及函数何时更改路由

3 个答案: