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


Environment: Browser, Client Routing.

The navigate('/some/url') function enables you to programmatically switch pages.

navigate() works only with Client Routing. If you use Server Routing, then do window.location.href = '/some/url' instead.

With navigate(), you can implement navigations that aren't triggered by the user clicking on a <a> link: for example, when redirecting a user after a successful form submission.

import { navigate } from 'vite-plugin-ssr/client/router'

function Form() {
   return (
     <form onSubmit={onSubmit}>
       {/* ... */}

async function onSubmit() {
  const navigationPromise = navigate('/form/success')
  console.log("The URL changed but the new page hasn't rendered yet.")
  await navigationPromise
  console.log('The new page has finished rendering.')

If you want to redirect users before the page finished rendering (e.g. to redirect non-authenticated users to a login page), then use throw redirect() instead.


  • navigate('/some-url', { keepScrollPosition: true }): Don't scroll to the top of the page; keep scroll position where it is instead. (Useful for Nested Layouts.) (You can also use <a href="/some-url" keep-scroll-position />.)
  • navigate('/some-url', { overwriteLastHistoryEntry: true }): Don't create a new entry in the browser's history, instead let the new URL replace the current URL. (This effectively removes the current URL from the browser history).

Vue example:

React example: