reactjs - 每次用户导航到新页面时调用/运行动画

Question

我有一个导航（功能）组件，其中包含一个使用 GSAP 的简单动画。它在页面第一次加载时动画。我希望每次用户点击不同的页面时都可以制作动画（我使用 React Reach Router进行页面导航）

我知道使用基于类的组件，我可能会使用componentDidMount方法，但是如何使用功能组件来实现呢？而且我认为window.onload不会起作用，因为站点实际上并没有重新加载，而是重新路由。

这是有问题的代码

Answer 1

包括Nav在Products和About组件中。

Answer 2

我能够让它工作。我保留了Nav组件中包含的所有内容。可能有更好的解决方案，但就目前而言，这可行：

  // set variable show initially to false
  const [show, setShow] = useState(false);

  // set show to true on click, then false again 
  const handleClick = () => {
    setShow(!show);
    setTimeout(function() {
      setShow(false);
    }, 500);
  };

  // if show is true, then run animation
  useEffect(() => {
    if (show) {
      TweenMax.from(navbar.current, 1, {
        y: -105
      });
    }
  }, [show]);

这是沙盒。