Я неправильно реализую javascript?

поэтому я делаю эту панель навигации, которая будет выделять кнопку в зависимости от раздела, в котором в данный момент находится пользователь, всякий раз, когда я повторно сохраняю файл, даже ничего не меняя, он будет работать правильно, выделяя цветом при нажатии или прокрутке, когда раздел измененный.

когда это работает, требуется только снова зарядить страницу и перестать работать, я неправильно реализую javascript?

import React from "react";
import FrontPage from './Routes/FrontPage'
import Products from './Routes/Products'
import Clients from './Routes/Clients'
import Contact from './Routes/Contact'
import {BsLinkedin} from 'react-icons/bs'
import {GrInstagram} from 'react-icons/gr'




function App() {
  const sections = document.querySelectorAll("section");
const navLi = document.querySelectorAll("nav .container ul li");

window.addEventListener("scroll", () => {
  let current = "";
  sections.forEach((section) => {
    const sectionTop = section.offsetTop;
    const sectionHeight = section.clientHeight;
    if (window.pageYOffset >= sectionTop - sectionHeight / 3) {
      current = section.getAttribute("id");
    }
  });

  navLi.forEach((li) => {
    li.classList.remove("active");
    if (li.classList.contains(current)) {
      li.classList.add("active");
    }
  });
});

  return (
    <>
    <nav>
      <div className = "container">
        <ul>
          <li><img src='https://diagnosemlpdf.s3.us-east-2.amazonaws.com/landing/static+source/logos/myfutureai_blanco_logo.png' style = {{width:"80%",  padding:"0" , margin:"0"}}/></li>
          <li class = "Inicio active"><a href = "#Inicio">Inicio</a></li>
          <li class = "Productos"><a href = "#Productos">Productos</a></li>
          <li class = "Clientes"><a href = "#Clientes">Clientes</a></li>
          <li class = "Contacto"><a href = "#Contacto">Contacto</a></li>
          <li style = {{"position":"relative", "top":"2vw"}}><a href='https://www.linkedin.com/company/myfutureai/'><BsLinkedin/></a></li>
          <div className='aristas'>
          <li><a href='https://www.instagram.com/myfuture_ai/'><GrInstagram/></a></li>
          <li><a href='https://twitter.com/myfuture_ai'><img style = {{"width": "100%", "margin":"0", "padding":"0"}} src='/twitter.png'/></a></li>
          </div> 
        </ul>
      </div>
    </nav>
    
    <section id = "Inicio">

        <FrontPage/>
      </section><section id = "Productos">
        <Products/>
      </section><section id = "Clientes">
        <Clients/>
      </section><section id = "Contacto">
        <Contact/>
      </section>
      </>
  );
}

export default App;

CSS__

/* _____NAVBAR CSS_______ */
nav {
  width: 10vw;
  height:100vh;
  position: fixed;
  top: 0;
  background-color: white;
  z-index: 1000;
}
.container{
  display:flex;
  flex-direction:column;
}
nav .container {
  width: 10vw;
  height:100vh;
  margin: 0 auto;
  text-align: center;
  display: flex;

}
nav .container ul  {
  width:100%;
  height: 100vh;
  background-color: #000040;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
nav .container ul li {
  display: inline-block;
}
nav .container ul li a {
  display: inline-block;
  text-decoration: none;
  color: white;
  font-size: 1.5rem;
  text-transform: uppercase;
}
nav .container ul li.active {
  background-color: #5e17eb;
  border-radius: 10px;
  transition: 0.3s ease background-color;
}
nav .container ul li.active a {
  color: rgb(255, 255, 255);
}

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
46
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я вернулся с ответом ... хотя логика javascript была в порядке, самый простой способ решить эту проблему в реакции js - это использовать REACT ROUTER V5 (в частности, "react-router-dom": "^ 5.2.0") --- у вас будут проблемы с v6--- и это дополнение для ссылки на разделы с той же страницы REACT ROUTER HASHLINK. это было намного проще, и стиль был в файле CSS, вот код:

идентификаторы, которые связывают хэш-код с разделом, находятся внутри файла каждого компонента.

import React from "react";
import FrontPage from './Routes/FrontPage'
import Products from './Routes/Products'
import Clients from './Routes/Clients'
import Contact from './Routes/Contact'
import { NavHashLink as Link } from "react-router-hash-link";

  function App() {




    
    return (
      <><nav>
        <Link  to='#home' smooth>Inicio</Link>
        <Link  to='#about' smooth>Productos</Link>
        <Link  to='#clients' smooth>Clientes</Link>
        <Link  to='#contact' smooth>Contacto</Link>
      </nav>
      <section>
          <FrontPage />
          </section>
          <section>
          <Products />
          </section>
          <section>
          <Clients />
          </section>
          <Contact />
        </>
     )
  }
  
  export default App;

в части css haslink может быть оформлен с использованием «a» в качестве ссылки. CSS

a{
  color: white;
  text-decoration: none;
  font-size: 1.5rem;
  margin-left: 15px;
 
 
}
a.active {
 width: 90%;
 color:#5e17eb;
 border-right: 4px solid white;
 transition:400ms ease-in ;
}

Другие вопросы по теме