reactjs - react 路由器如何在选择菜单链接时折叠移动设备上的导航栏

Question

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

这里是codesandbox链接，请随意 fork 它。

<强> https://codesandbox.io/s/it6lj

谢谢!

Answer 1

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

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

相反，我通过为 <NavLink /> 设置点击处理程序解决了这个问题。标签，独立于切换菜单的处理程序。与打开和关闭菜单的其他处理程序不同，NavLink handler 仅通过直接将菜单的状态对象设置为 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 . . .   

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