reactjs - 更改区域设置导致 onScroll 导航重置

Question

我有一个在滚动时会改变其背景颜色的标题。但是，如果我在页面中间更改语言环境，它会将我的背景颜色重置为默认值。如何防止它被重新渲染？

我的应用是用 NextJs 构建的，并使用 next-i18next 进行国际化路由

const TheHeader = () => {
  const [isScroll, setIsScroll] = useState(false);
  const router = useRouter();

  useEffect(() => {
    function handleScroll() {
      setIsScroll(window.scrollY > 50 ? true : false);
    }
    window.addEventListener("scroll", handleScroll);
    return () => {
      window.removeEventListener("scroll", handleScroll);
    };
  }, []);

  return (
    <header className="relative z-[1]">
      <nav
        className={isScroll ? "bg-gray-900 shadow-md" : ""}
      >
        <Link
          href="/"
          locale={router.locale === "en" ? "th" : "en"}
          scroll={false}
        >
            <button>
              {router.locale} {router.locale === "en" ? "" : ""}
            </button>
        </Link>
      </nav>
    </header>
  );
};