next.js - 使用 Locomotive 滚动和 react-transition-group 更改页面后无法向下滚动

Question

我已经安装了Locomotive scroll和React Transition Group。但是当我点击链接或打开页面时，我无法再滚动，它会停留在屏幕顶部。我已经添加scroll.destory()了，useEffect但它不起作用。

我应该怎么办？

import { useEffect } from 'react';
    import Head from 'next/head';
    import { SwitchTransition, Transition } from 'react-transition-group';
    import gsap from 'gsap';
    import '@/styles/styles.scss';
    
    export default function MyApp({ Component, pageProps, router }) {
      function enter(node) {
        gsap.from(node, {
          duration: 0.5,
          autoAlpha: 0,
        });
      }
    
      function exit(node) {
        gsap.to(node, {
          duration: 0.5,
          autoAlpha: 0,
        });
      }
      useEffect(() => {
        let scroll;
        import('locomotive-scroll').then(
          (locomotiveModule) => {
            scroll = new locomotiveModule.default({
              el: document.querySelector('[data-scroll-container]'),
              smooth: true,
              smoothMobile: false,
              resetNativeScroll: true,
            });
          },
        );
    
        // `useEffect`'s cleanup phase
        return () => scroll.destroy();
      }, []);
    
      return (
        <>
          <SwitchTransition>
            <Transition
              key={router.pathname}
              timeout={100}
              in={true}
              onEnter={enter}
              onExit={exit}
            >
              <main data-scroll-container className="container">
                <Component {...pageProps} />
              </main>
            </Transition>
          </SwitchTransition>
        </>
      );
    }