时间戳

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

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

问题描述

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

当我使用导航栏切换到其他页面时，我使用的脚本不会重置。例如，在移动视图中，您可以使用导航栏（单击汉堡时变成侧边栏）转到项目页面。导航到那里后，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 方面，请告诉我。

标签： javascriptreactjsnext.js

解决方案

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

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

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

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

您在这里尝试做的一个非常基本的示例。

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

推荐阅读