Active Links

什么是 active links？ 这是在导航中以视觉方式突出显示当前页面的做法。 例如，此页面称为 “Active Links”，并在本网站左侧的导航栏中以灰色背景突出显示。 该 link 被称为 “active”

实现 active links：

• 创建 <Link> 组件
• 使 pageContext.urlPathname 在组件 <Link> 中可用。请参考 指南 > 随处访问 pageContext

我们的 <Link> 组件检查是否 const isActive = href === pageContext.urlPathname 并相应的设置 css 类 <a class="is-active">

React example：

• /boilerplates/boilerplate-react/renderer/Link.jsx

Vue example：

• /boilerplates/boilerplate-vue/renderer/Link.vue

如果我们使用 SSR，则不能使用 window.location.pathname，因为服务端渲染时 window 不可用。 如果我们使用 SPA渲染，那么可以使用 window.location.pathname 代替 pageContext.urlPathname