使用React Hooks与React Router实现导航动态显示的问题求解

问题根因 #

你当前的方案失效是因为document.location.pathname是原生浏览器API，值变化时不会触发React组件重新渲染，只有手动刷新页面才能拿到最新路径匹配导航结构，导致点击NavLink后导航没有同步更新。

解决方案 #

不用手动维护状态监听路径，直接用react-router提供的useLocationHook获取响应式路径，路由变化时会自动触发组件重渲染，动态匹配导航结构即可：

import React from 'react';
import { NavLink, useLocation } from 'react-router-dom';

const NavBar = () => {
  // 响应式获取当前路径，路由变化时自动更新
  const { pathname } = useLocation();

  return (
    <div className="header-nav">
      <nav className="navBar">
        <ul>
          <li><NavLink exact to="home" className="homebutton"> / </NavLink></li>
          {/* 路径匹配/account或/return时展示Account导航 */}
          {['/account', '/return'].some(path => pathname.includes(path)) && (
            <li><NavLink to="account"> Account /</NavLink></li>
          )}
          {/* 只有路径匹配/return时展示退换货导航，跳回上一级/account时自动消失 */}
          {pathname.includes('/return') && (
            <li><NavLink to="return" > Return/Exchange /</NavLink></li>
          )}
        </ul>
      </nav>
    </div>
  );
};

export default NavBar;

逻辑说明 #

• 无需额外维护自定义状态和点击事件，路由本身的状态就能直接控制导航展示，不会出现状态不同步的问题
• 如果你需要保留父组件传props.utm的逻辑，只要保证父组件的utm值跟着路由变化同步更新即可，优先推荐直接在导航组件内用useLocation取路径，避免props透传问题
• react-router v5/v6版本都支持useLocation用法，仅NavLink的exact属性适配有细微差异，不影响核心逻辑

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