Блог

Я пишу свой первый сайт-портфолио./ Я только что закончил главную страницу, и теперь я добавляю больше страниц. Кроме того, компонент панели навигации использует 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 (сдвигает панель навигации при нажатии кнопки burger):

 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, пожалуйста, дайте мне знать.

Вы не понимаете, как работает React. Вы не должны включать javascript, как вы это делали

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

но с import MyComponent from './path/to/component

Кроме того, очень плохо манипулировать DOM напрямую, вместо этого вам следует использовать хуки из React.

Очень простой пример того, что вы пытаетесь сделать здесь.

Я предлагаю вам прочитать документ React и попытаться сначала понять его концепции.