使用SSR在React项目中使用Introjs

Question

我有nextjs项目。 我想在我的网站上实现Introjs提示系统。 如果我重新加载页面，一切正常，但是如果我在另一个页面上使用服务器渲染并转到带有Intro的页面，则尽管页面已构建，但我没有用于提示的选择器的任何html元素。路由是使用标准的nextjs路由器执行的。

componentDidMount挂钩中的我的代码：

const myIntro = introJs();
console.log(typeof document, document.querySelectorAll('.intro1').length)
if (document.querySelectorAll('.intro1').length > 0) {
     myIntro.addStep({
        element: document.querySelectorAll('.intro1')[0],
        intro: 'text',
        position: 'bottom',
     });
}
myIntro.start();

console.log返回->对象，0

使用此页面上的SSR，一切都很好，仅当您从另一个切换到它时。大概这样做nextjs路由...但是我如何才能访问componentDidMount中的html元素？

此外，如果我在此页面上超负荷，切换到另一个页面并再次返回，一切都很好。 感谢您的任何想法！