vite-plugin-ssr has been renamed Vike, see migration guide.

Active Links

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:

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 use window.location.pathname instead of pageContext.urlPathname.