react路由高亮样式
时间: 2023-09-06 17:10:08 浏览: 46
React Router 提供了一个 `NavLink` 组件,可以用来实现路由链接的高亮样式。具体实现步骤如下:
1. 在导入 React Router 时,同时导入 `NavLink` 组件:
```javascript
import { BrowserRouter as Router, Switch, Route, NavLink } from "react-router-dom";
```
2. 在页面中使用 `NavLink` 组件来创建路由链接,同时设置 `activeClassName` 属性来指定高亮时的样式类名。
```javascript
<NavLink exact to="/" activeClassName="active-link">
Home
</NavLink>
<NavLink to="/about" activeClassName="active-link">
About
</NavLink>
<NavLink to="/contact" activeClassName="active-link">
Contact
</NavLink>
```
上面的代码中,如果当前路由与 `to` 属性指定的路径匹配,则会自动添加 `activeClassName` 属性指定的样式类名。
3. 在 CSS 中定义 `active-link` 样式类,来指定高亮时的样式。
```css
.active-link {
color: red;
font-weight: bold;
}
```
这样就可以实现 React Router 路由链接高亮的效果了。