React中使用styled-components实现NavLink时首页始终激活的问题

问题原因 #

React Router的NavLink默认采用部分匹配规则，首页路径/会被所有以/开头的路由（比如/pvp、/championship）匹配，导致切换到其他路由时首页链接仍保持激活状态。

解决方案 #

根据你使用的React Router版本，添加对应的匹配限制属性：

• React Router v5及更早：给首页的NavLink添加exact属性
• React Router v6及以上：使用end属性替代exact（作用完全一致）

同时你不需要单独创建HomeLink组件，复用StyledLink即可减少冗余代码。

修改后的代码示例 #

import React from 'react'
import { NavLink } from 'react-router-dom'
import styled from 'styled-components'

const StyledLink = styled(NavLink)`
    padding:10px 0px;
    margin : 0px 10px;
    opacity:0.6;
    color:black;
    font-family:'RIXGOL';
    text-decoration: none;
    &:hover {
        border-bottom:3px black solid;
        font-weight:bold;
        opacity:1;
    }
    &.active { 
      border-bottom:3px black solid;
      font-weight:bold;
      opacity:1;
    }
`

export default function Nav() {
  return (
    <div style={{marginBottom:'10px', padding:'10px'}}>
        {/* React Router v6用end，v5替换为exact即可 */}
        <StyledLink to='/' end>home</StyledLink>
        <StyledLink to='/pvp'>pvp</StyledLink>
        <StyledLink to='/championship'>world</StyledLink>
    </div>
  )
}

修改后，只有当当前路由完全匹配/时，首页链接才会应用激活样式，切换到其他路由时会自动取消激活状态。

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