如何让同一个NavLink导航链接根据当前页面显示不同文本

问题根因 #

1. 本地状态更新为异步执行：setIsClicked 是React的异步更新方法，点击事件触发时，NavLink 的to属性读取的还是更新前的isClicked值，导致跳转逻辑和状态更新不同步，第一次点击仅能触发旧值对应的跳转，状态变更滞后。
2. 本地状态无持久化能力：isClicked 存储在组件的本地状态中，页面刷新、组件重新挂载后会自动重置为初始值false，和实际的路由路径完全脱节，自然会出现刷新后显示文本不符合预期的问题。

解决方案 #

不要用本地状态控制导航链接的逻辑，直接读取当前路由路径做判断，天然和路由状态同步，不需要额外维护状态，也能避免刷新后状态丢失的问题，实现代码如下：

// 首先引入对应钩子
import { useLocation, NavLink } from 'react-router-dom';

// 组件内逻辑
const YourNavComponent = () => {
  // 获取当前路由路径
  const location = useLocation();
  // 判断当前是否处于profile页面
  const isInProfile = location.pathname === '/profile';

  return (
    <NavLink to={isInProfile ? '/' : '/profile'}>
      <NavPage>{isInProfile ? 'Home' : 'Profile'}</NavPage>
    </NavLink>
  )
}

如果存在/profile/xxx这类嵌套路由，可以把判断逻辑改为location.pathname.startsWith('/profile')，适配更复杂的路由场景。

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