What are active links? It's the practice of visually highlighting the currently selected page in the navigation. For example, we can see this page
Active Linkshighlighted in gray in the navigation on the left of this website; the link in the navigation pointing to this page is said to be "active".
To implement active links we:
pageContext.urlPathnameavailable to the
<Link>component, see Access
<Link> component can then check whether the link is active with
const isActive = a.href === pageContext.urlPathname
and add a CSS class
<a class="is-active"> accordingly.
Unless we render our page as SPA we cannot use
window.location.pathnameas it's not available while our page is rendered on the server-side.