react中的Navlink怎么实现路由高亮

在 React 中使用 NavLink 组件可以实现路由高亮，具体实现步骤如下：

1. 安装 react-router-dom 包，该包提供了 NavLink 组件。

npm install react-router-dom

2. 在组件中导入 NavLink 组件。

import { NavLink } from 'react-router-dom';

3. 在组件的 render 方法中使用 NavLink 组件，并设置 activeClassName 属性为路由高亮时要添加的 class 名称。

render() {
  return (
    <div>
      <NavLink to="/" activeClassName="active">Home</NavLink>
      <NavLink to="/about" activeClassName="active">About</NavLink>
      <NavLink to="/contact" activeClassName="active">Contact</NavLink>
    </div>
  );
}

4. 在 CSS 中定义路由高亮时要添加的 class 样式。

.active {
  font-weight: bold;
}

这样，当用户点击 NavLink 组件时，会自动添加 active 类名，从而实现路由高亮。