选择菜单链接时如何在移动设备上折叠导航栏反应路由器

Question

关于在选择菜单链接页面时如何在移动设备上折叠导航栏的任何想法。

这里是codeandbox链接，随意fork吧。

https://codesandbox.io/s/it6lj

谢谢！

Answer 1

我使用 Reactstrap 9.0.0-2（基于 Bootstrap 5.1.0 css 库）遇到了这个问题。我不确定这是否是早期（更稳定）版本的问题。已经想到如何让菜单在NavLink 选择时关闭，但想看看其他人如何解决问题以获得一些新的想法和经验。

我尝试了第一个接受的答案，添加了 data-attributes 和 data-target 在NavLinks 上，并指向NavbarToggler 上的css #id 属性。不幸的是，这对我不起作用。

相反，我通过为<NavLink /> 标签设置一个单击处理程序来解决这个问题，该处理程序独立于切换菜单的处理程序。与打开和关闭菜单的其他处理程序不同，NavLink 处理程序仅通过将菜单的状态对象直接设置为false 来关闭它。

逻辑是：必须打开菜单才能单击<NavLink />，所以这个NavLink 处理程序不需要打开菜单。一旦你选择了你想去的地方，并点击了Navlink标签，你可能希望菜单关闭并离开你的方式，而不是自己关闭它手动。

• 简化示例：

import React, { useState } from 'react';
import { Collapse, Nav, NavBar, NarbarBrand, NavbarToggler, NavItem } from 'reactstrap';
import { NavLink } from 'react-router-dom';

const Header = (props) => {
    const [menuOpen, setMenuOpen] = useState(false);  // initially closed

    const toggleMenu = () => {     // this handler is "regular"
        setMenuOpen(!menuOpen);    // open and close...
    };

    const closeMenu = () => {      // ... and this one only
        setMenuOpen(false);    // closes it ...
    };

return (
  <NavBar expand="md">
    <Collapse isOpen={menuOpen} navbar>
      <Nav navbar>
        <NavLink
          to="/blog/:article"
          className="navlink text-light shadow-lg"
          onClick={closeMenu}
         >
          {blogArticle.title}
          </NavLink>
                     // . . . and so on . . .   

有时最简单的解决方案也是最好的……

Answer 2

将data-toggle="collapse" 和data-target="#navbarCollapse" 添加到每个NavLink 以同时切换关闭菜单。

<ul className="navbar-nav ml-auto">
  <li className="nav-item">
    <NavLink
      data-toggle="collapse"
      data-target="#navbarCollapse"
      className="nav-link"
      activeClassName="active"
      to="/"
      exact
    >
      Home
    </NavLink>
  </li>
  <li className="nav-item">
    <NavLink
      data-toggle="collapse"
      data-target="#navbarCollapse"
      className="nav-link"
      activeClassName="active"
      to="/about"
    >
      About
    </NavLink>
  </li>

Answer 3

您可以使用状态管理菜单可见性：

import { useState } from "react";
import { NavLink } from "react-router-dom";

const Navbar = () => {
  const [show, setShow] = useState(false);
  const handleNavClick = () => {
    setShow(false);
  };
  return (
    <nav className="navbar navbar-expand-md navbar-dark bg-dark">
      <a className="navbar-brand" href="/">
        Fixed navbar
      </a>
      <button
        className="navbar-toggler"
        type="button"
        onClick={() => setShow(!show)}
      >
        <span className="navbar-toggler-icon" />
      </button>
      <div
        className={`collapse navbar-collapse  ${show ? "show" : ""}`}
        id="navbarCollapse"
      >
        <ul className="navbar-nav ml-auto">
          <li className="nav-item">
            <NavLink
              onClick={handleNavClick}
              className="nav-link"
              activeClassName="active"
              to="/"
              exact
            >
              Home
            </NavLink>
          </li>
          <li className="nav-item">
            <NavLink
              onClick={handleNavClick}
              className="nav-link"
              activeClassName="active"
              to="/about"
            >
              About
            </NavLink>
          </li>
        </ul>
      </div>
    </nav>
  );
};

export default Navbar;

Answer 4

你可以为此使用useRef钩子并处理div的类属性。

  const collapseRef = useRef(null);

  const hideBars = () => {
    collapseRef.current.setAttribute("class", "navbar-collapse collapse");
  };

  <div
    className="collapse navbar-collapse"
    id="navbarCollapse"
    ref={collapseRef}
  >

然后在您的 NavLink 中

        <NavLink
          className="nav-link"
          activeClassName="active"
          to="/about"
          onClick={hideBars}
        >
          About
        </NavLink>

检查this沙盒