React中点击导航栏其他链接时首页NavLink始终激活如何解决

问题原因 #

你给Route组件添加的exact属性仅控制路由组件的匹配渲染逻辑，不会影响NavLink的激活状态匹配规则。react-router-dom v5的NavLink默认采用前缀匹配规则：只要当前页面路径包含to属性指定的路径，就会给元素添加active类。首页路径是/，所有站点路径都包含/，所以无论跳转到哪个页面，首页的导航链接都会命中激活规则。

解决方案 #

仅需在遍历渲染NavLink时，给指向首页的链接添加exact属性即可，修改NavMenu组件中渲染NavLink的代码：

<NavLink to={url} exact={url === '/'}>{text}</NavLink>

如果你是在links常量数组中配置路由，也可以直接给首页的配置项新增exact: true字段，遍历的时候透传属性即可：

// constants.js 中的links数组示例
export const links = [
  {id: 1, url: '/', text: '首页', exact: true},
  {id: 2, url: '/about', text: '关于'},
  // 剩余其他路由配置
]

// NavMenu组件中遍历的代码
<NavLink to={url} exact={link.exact}>{text}</NavLink>

补充说明 #

如果你后续升级到react-router-dom v6，exact属性已被废弃，对应功能替换为end属性，使用逻辑和上述方案一致。

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