Панель навигации React не сворачивается при нажатии на ссылку

#reactjs #navbar #hamburger-menu

#reactjs #Панель навигации #Гамбургер-меню

Вопрос:

Я создал панель навигации React, следуя руководству, когда я нажимаю меню burger, навигация расширяется и сворачивается, как и ожидалось, но когда я нажимаю ссылку в меню навигации, она переходит на страницу, но панель навигации не сворачивается. Я проверил несколько вопросов / руководств, но все они ссылаются на Bootstrap, и этот код не использует Bootstrap, я бы предпочел не менять панель навигации на Bootstrap, если этого можно избежать! Любая помощь будет оценена.

 import React, { Component } from "react";
import logo from "../images/logo.svg";
import { FaAlignRight } from "react-icons/fa";
import { Link } from "react-router-dom";

export default class Navbar extends Component {
  state = {
    isOpen: false
  };
  handleToggle = () => {
    this.setState({ isOpen: !this.state.isOpen });
  };

  componentDidMount() {
    window.addEventListener("scroll", this.resizeHeaderOnScroll);
    window.addEventListener("scroll", this.navTransparent);
    window.addEventListener("scroll", this.navShadow);
  };
  resizeHeaderOnScroll() {
    const distanceY = window.pageYOffset || document.documentElement.scrollTop,
      shrinkOn = 100,
      headerEl = document.getElementById("logo");
    if (distanceY > shrinkOn) {
      headerEl.classList.add("logoShrink");
      
    } else {
      headerEl.classList.remove("logoShrink");
    }
  }

  navTransparent() {
    const distanceY = window.pageYOffset || document.documentElement.scrollTop,
      shrinkOn = 100,
      headerEl = document.getElementById("navbar");
    if (distanceY > shrinkOn) {
      headerEl.classList.add("navbarBg");
      
    } else {
      headerEl.classList.remove("navbarBg");
    }

  }
  
  navShadow() {
    const distanceY = window.pageYOffset || document.documentElement.scrollTop,
      shrinkOn = 100,
      headerEl = document.getElementById("navbar");
    if (distanceY > shrinkOn) {
      headerEl.classList.add("navShadow");
      
    } else {
      headerEl.classList.remove("navShadow");
    }
  }
  render() {
    return <nav id="navbar">
      <div className="nav-center">
        <div className="nav-header">
          <Link to="/">
            <img id="logo" src={logo} alt="" />
          </Link>
          <button type="button" className="nav-btn" onClick={this.handleToggle}>
            <FaAlignRight className="nav-icon" />
          </button>
        </div>
        <ul className={this.state.isOpen ? "nav-links show-nav" : "nav-links"}>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/nigelservices">Services</Link>
          </li>
          <li>
            <Link to="/contact">Contact</Link>
          </li>
          </ul>
      </div>
    </nav>;
  }
}

1. Возможно, вы можете использовать onClick в компоненте link, который выполняет функцию handleToggle, поэтому при каждом доступе к ссылке боковая панель также будет закрываться.

2. Хорошо, я могу попробовать, у вас есть какие-либо ссылки или документы, на которые я могу посмотреть?

3. У меня нет никакой документации, но вы можете сделать: <Link to=»/nigelservices» onClick{() => this.setState({ isOpen: false })}> Services</Link> и это должно сработать. Не забудьте добавить это в каждую ссылку

4. Я буквально только что сделал это, поняв, что вы имеете в виду, можете ли вы ответить на это в основном потоке, и я могу пометить это как решение :)?

Ответ №1:

Чтобы ответить на вопрос здесь, вы всегда можете это сделать, потому что компонент Link принимает onClick prop:

 export default class Navbar extends Component {
 // Rest of your code
 handleLinkClick = () => {
  this.setState({ isOpen: false });
 };

 render() {
  return (
  // Your JSX
   <Link to="/" onClick={handleLinkClick}>Home</Link>
  )
 }
}

Не забудьте добавить это в каждый компонент ссылки.

В качестве дополнительного примечания вы также можете использовать компонент NavLink в маршрутизаторе react для обработки стиля, когда маршрут является текущим. https://reactrouter.com/web/api/NavLink