NextJS 页面更改后自定义 JS 中断？

Question

我一直在开发我的个人网站，并使用 NextJS 将其变成 PWA。每当我从我的应用程序更改页面时，我导入到顶级组件 (_document.js) 的自定义 JS 将停止在其他页面上工作，除非我重新加载该页面。有人对此有解决方案或遇到类似问题吗？

这是我录制的一段 link 视频，展示了我在说什么。如果需要，我也可以提供代码。我觉得这是一个相对容易的修复，但这是我的第一次尝试和下一步，仍在适应环境。

https://drive.google.com/file/d/16doKPpJPDHhFcYLiX8lZEWGoTf8b19MM/view

//navbar.js (imported js file)
const menu = document.querySelector('#hamburger');
const wrapper = document.querySelector('.wrapper');
const drawer = document.querySelector('.navbar');

menu.addEventListener('click', function(event) {
  drawer.classList.toggle('open');
  event.stopPropagation();
});
wrapper.addEventListener('click', function() {
  drawer.classList.remove('open');
});

Answer 1

我认为您将 React 应用视为传统（静态）网络应用 - 用 PHP 编写或通过模板呈现为 HTML。

对于 React，它是一种反模式来操纵 DOM 独立于 React。

在这种特殊情况下，更好的方法是使用全局状态（例如，您可以使用 Redux）来维护菜单抽屉的状态。单击汉堡包图标会切换此全局状态值，并且抽屉本身会处理其类（如果 state.open 则附加 open）。

您的组件如下所示：

const Header = ({ toggleMenu }) => {
  return (
    <div>
      ...
      <button onClick={ toggleMenu } />
    </div>
  )
}

export default connect(null, { toggleMenu })(Header)

const Menu = ({ isOpen }) => {
  return (
    <div className={ isOpen ? "open" : "" }>
      ...
    </div>
  )
}

export default connect(function (state) {
  return { isOpen: state.menu.open }
})(Menu)

你的动作创造者

function toggleMenu () {
  return { action: TOGGLE_MENU }
}

和你的减速器

function menuReducer(previousState, action) {
  switch (action.action) {
    case TOGGLE_MENU:
      return { ...previousState: open: !previousState.open }
    default:
      return previousState
  }
}

NextJS 页面更改后自定义 JS 中断？

Custom JS breaks after page change in NextJS?

javascript

reactjs

nextjs