非Bootstrap实现的React导航栏点击链接后不折叠问题求助

你维护的导航展开状态isOpen是组件内部的独立状态，路由跳转时不会自动同步重置，因此移动端汉堡菜单点开后，跳转页面不会自动收起。所有解决方案均不需要引入Bootstrap，仅基于现有代码调整即可。

不需要额外引入任何依赖，直接在每个导航<Link>标签上增加点击事件，触发时手动将isOpen状态重置为false，和原有路由跳转逻辑并行执行，不影响跳转功能。
修改后的导航菜单部分代码如下：

<ul className={this.state.isOpen ? "nav-links show-nav" : "nav-links"}>
  <li>
    <Link 
      to="/" 
      onClick={() => this.setState({ isOpen: false })}
    >
      Home
    </Link>
  </li>
  <li>
    <Link 
      to="/nigelservices" 
      onClick={() => this.setState({ isOpen: false })}
    >
      Services
    </Link>
  </li>
  <li>
    <Link 
      to="/contact" 
      onClick={() => this.setState({ isOpen: false })}
    >
      Contact
    </Link>
  </li>
</ul>

该方案适合当前导航项数量少、不想做额外逻辑调整的场景。

如果后续会持续新增导航入口，逐个给链接绑定关闭事件容易出现重复代码、漏写的问题，可以结合React Router的路由检测能力，只要页面路由地址发生变化，就自动收起导航，不需要给每个链接单独写事件。
具体修改步骤：

• 顶部导入withRouter高阶组件，用于获取当前路由信息：

import { Link, withRouter } from "react-router-dom";

• 在类组件中补充生命周期逻辑，检测路由变化后重置状态：

componentDidUpdate(prevProps) {
  // 对比新旧路由地址，发生变化时重置导航状态
  if (this.props.location.pathname !== prevProps.location.pathname) {
    this.setState({ isOpen: false });
  }
}

componentWillUnmount() {
  // 顺带优化：移除之前挂载的滚动事件监听，避免内存泄漏
  window.removeEventListener("scroll", this.resizeHeaderOnScroll);
  window.removeEventListener("scroll", this.navTransparent);
  window.removeEventListener("scroll", this.navShadow);
}

• 最后导出组件时用withRouter包裹，注入路由相关props：

export default withRouter(Navbar);

该方案完全不需要修改现有导航Link的代码，后续新增导航项时，只要把新链接放进nav-links列表里，就会自动触发导航收起逻辑，降低维护成本。

两种方案可根据自身需求任选其一，即可解决跳转后导航不自动收起的问题。

内容的提问来源于stack exchange，提问作者Frankinstyyn