⚠️
The vite-plugin-ssr project has been renamed Vike.
  • If you are using vite-plugin-ssr, migrate to Vike.
  • For new projects, use Vike instead of vite-plugin-ssr.
Vike itself (without extensions) is like vite-plugin-ssr: unopinionated and fully agnostic.

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.