⚠️
The vite-plugin-ssr project has been renamed Vike.
  • If you are already using vite-plugin-ssr then migrate to Vike.
  • For new projects, don't use vite-plugin-ssr but use Vike instead.

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.