logo

该视频仅会员有权观看

立即开通课程「React.js 前端应用开发实践」权限。

¥
199
/ 年

路由链接(Link 与 NavLink)

  • 在网页中使用 HTML 的 <a> 标签插入链接。
  • 设置链接的 href 属性为斜线 / 表示回到应用首页。
  • 在使用 React Router 的应用中,应使用 <Link> 组件替代 <a> 标签以避免页面刷新。
  • <Link>to 属性指定路由地址。
  • 可以在应用的头部添加多个链接,并使用 NavLink 组件以便应用特定样式于当前激活的链接。
  • 实现激活状态下的链接样式可以通过添加一个 CSS 类 active
  • 创建 app.css 样式表,设置基本样式,包括链接颜色和下划线的移除,并为激活状态的链接设置加粗。
  • 测试后发现,点击链接时在不刷新页面的情况下导航,并且当前激活的链接样式会相应地更新。