React路由环境下，用户切换至下一个链接时如何高亮历史链接？

嘿，这个需求用React Router自带的NavLink组件就能轻松搞定——它比普通的Link组件多了专门处理**激活状态（当前路由匹配的链接）**的能力，具体操作步骤如下：

1. 替换导航组件中的Link为NavLink #

首先在你的Navigation组件里，把react-router-dom提供的Link换成NavLink，先导入它：

// 在Navigation组件的顶部导入
import { NavLink } from 'react-router-dom';

2. 配置激活状态的类名或样式 #

方式一：用自定义CSS类（推荐，样式更灵活） #

给每个NavLink加上activeClassName属性，指定一个自定义类名，比如visited-link，同时建议加上exact属性避免子路由误触发激活状态：

// Navigation组件中的导航项示例
<NavLink 
  to="/welcome" 
  activeClassName="visited-link"
  exact
>
  Welcome
</NavLink>

<NavLink 
  to="/generalinfo" 
  activeClassName="visited-link"
  exact
>
  General Info
</NavLink>

<NavLink 
  to="/preferences" 
  activeClassName="visited-link"
  exact
>
  Preferences
</NavLink>

然后在对应的CSS文件（比如App.css或Navigation.css）中，给这个类写高亮样式：

.visited-link {
  color: #2563eb; /* 换成你想要的高亮颜色 */
  font-weight: bold;
  text-decoration: underline;
}

方式二：内联激活样式（快速测试用） #

如果不想额外写CSS类，也可以用activeStyle属性直接定义内联样式：

<NavLink 
  to="/welcome"
  exact
  activeStyle={{
    color: '#2563eb',
    fontWeight: 'bold',
    textDecoration: 'underline'
  }}
>
  Welcome
</NavLink>

3. 确保导航在路由上下文内 #

注意你的Navigation组件已经被包裹在BrowserRouter范围内了（从你提供的App.js代码来看，整个App都在<BrowserRouter>里，这点已经满足），这样NavLink才能正常检测当前路由并激活样式。

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