What are active links? It's the practice of visually highlighting the current page in the navigation. For example, this page is called "Active Links" and is highlighted with a gray background in the navigation on the left of this website. The link is said to be "active".
To implement active links:
<Link>
.pageContext.urlPathname
available to our new component <Link>
. See Guides > Access pageContext
anywhere.Our <Link>
component checks whether const isActive = href === pageContext.urlPathname
and sets a CSS class accordingly <a class="is-active">
.
React example:
Vue example:
We cannot use
window.location.pathname
if we use SSR, because it's not available when our page is rendered on the server-side. If we render our page as SPA, then we can usewindow.location.pathname
instead ofpageContext.urlPathname
.