我正在使用NextJS 12。2.5，我创建了一个特定ID的部分，以便能够将用户直接重定向到它，但问题是，每次我输入带有锚和部分ID的URL时，例如，http：//localhost：3000/mx #contact-form，我都会得到以下错误：

Unhandled Runtime Error
Error: Hydration failed because the initial UI does not match what was rendered on the server.

我尝试了以下实现，但没有成功：

scrollToSection。ts

export const scrollToSection = () => {
  const anchor = window.location.hash;
  if (!anchor) return;
  const element = document.querySelector(anchor);
  if (element && typeof document !== 'undefined')
    element.scrollIntoView();
};

然后在我的页面上。tsx

.....
const router = useRouter();

useEffect(() => {
   router.events.on('routeChangeComplete', scrollToSection);

   return () => {
     router.events.off('routeChangeComplete', scrollToSection);
  };
}, []);
.....

有人知道如何解决这个问题吗？