当用户在下一个 js 中导航页面时如何“重新加载”JavaScript / CSS答案

【问题标题】：How to "reload" JavaScript / CSS when user navigates pages in next js当用户在下一个 js 中导航页面时如何“重新加载”JavaScript / CSS
【发布时间】：2020-12-23 06:55:49
【问题描述】：

我正在编写我的第一个投资组合网站。/ 我刚刚完成主页，现在我正在添加更多页面。此外，导航栏组件使用 JavaScript 来控制其部分功能。

当我使用导航栏切换到其他页面时，我使用的脚本不会重置。例如，在移动视图中，您可以使用导航栏（单击汉堡时变成侧边栏）转到 projects 页面。导航到那里后，JavaScript 文件不再适用。因此，在用户更改页面后，document.querySelector('body').style.overflowY = 'hidden'; 行不适用。

简化问题：

主要问题是 JavaScript 没有刷新。为了进行测试，我将console.log("refresh"); 放在那个JavaScript 文件中，当我使用链接浏览网站时，该语句只打印一次。如何配置 Next 以在每次页面加载时打印？

导航栏：

import Link from 'next/Link';
import NavbarStyles from "../styles/navbarStyles";
const Navbar = () => (
    <nav>
        <div className="logo">
            <h4><Link href="/"><a>Red Williams</a></Link></h4>
        </div>
        <ul className="nav-links">
            <li><Link href="/resume"><a>Resume</a></Link></li>
            <li><Link href="/projects"><a>Projects</a></Link></li>
            <li><Link href="/contact"><a>Contact</a></Link></li>
        </ul>
        <div className="burger">
            <div className="line-1"></div>
            <div className="line-2"></div>
            <div className="line-3"></div>
        </div>

        {/* Styles */}
        <style jsx global>{NavbarStyles}</style>

        {/* Sidebar */}
        <script type="text/javascript" src="/static/scripts/slide.js"></script>
    </nav>  
);

export default Navbar;

JavaScript 文件（点击汉堡时滑动导航栏）：

const slide = () => {
    const burger = document.querySelector('.burger');
    const nav = document.querySelector('.nav-links');
    const navLinks = document.querySelectorAll('.nav-links li');
## 
    console.log("refresh");

    burger.addEventListener('click', ()=> {

        // Toggle sidebar
        nav.classList.toggle('nav-active');

        // Time link animation
        navLinks.forEach((link, index) => {
            if (link.style.animation) {
                link.style.animation = '';
            } else {
            link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.25}s`;
            }
        });

        // Change burger/X
        burger.classList.toggle('toggle');

        // Toggle scrolling
        if (document.querySelector('body').style.overflowY === '') {
            document.querySelector('body').style.overflowY = 'hidden';
        } else {
            document.querySelector('body').style.overflowY = '';
        }
    });
}
slide();

一开始我以为是汉堡上的事件监听器有问题，但是当页面改变时console.log("refresh");行没有运行，所以不可能这样。

我知道这个问题，只是不知道如何解决。这是我的第一个 Next/React 项目。另外，如果您对这段代码的“最佳实践”有任何建议，尤其是其中的 JavaScript 方面，请告诉我。

【问题讨论】：

标签： javascript reactjs next.js

【解决方案1】：

你不明白 React 是如何工作的。您不应该像以前那样包含 javascript

<script type="text/javascript" src="/static/scripts/slide.js"></script>

但是import MyComponent from './path/to/component

最重要的是，直接操作 DOM 是非常糟糕的，你应该使用 React 中的钩子。

您正在尝试做的事情的一个非常基本的示例here。

我建议你先阅读 React 文档并尝试理解它的概念。

【讨论】：