FUNSTACK Router

GitHub

FAQ

Browser doesn't scroll to top after navigation

According to the Navigation API specification, the browser should automatically scroll to the top of the page after a same-document navigation. However, as of now, Chrome and Safari do not follow this part of the spec.

As a workaround, you can listen to the navigatesuccess event and scroll to the top manually:

import { useEffect } from "react";

function App() {
  useEffect(() => {
    const navigation = window.navigation;
    if (!navigation) {
      return;
    }
    const controller = new AbortController();
    navigation.addEventListener(
      "navigatesuccess",
      () => {
        const transition = navigation.transition;
        if (
          transition.navigationType === "push" ||
          transition.navigationType === "replace"
        ) {
          // Safari ignores scrolling immediately after navigation,
          // so we wait a bit before scrolling
          setTimeout(() => {
            window.scrollTo(0, -1);
          }, 10);
        }
      },
      { signal: controller.signal },
    );
    return () => {
      controller.abort();
    };
  }, []);

  return <Router routes={routes} />;
}

location.href and location.reload() doesn't hard navigate

When you use location.href = "..." or location.reload() in an app with FUNSTACK Router, the router intercepts the navigation and handles it as a client-side route change instead of performing a full page reload.

This is because the Navigation API, which FUNSTACK Router is built on, intercepts these navigations by default.

If you need a true hard navigation or reload that bypasses the router, use hardNavigate or hardReload:

import { hardReload, hardNavigate } from "@funstack/router";

// Full page reload — bypasses the router and all blockers
hardReload();

// Full page navigation — bypasses the router and all blockers
hardNavigate("/other-page");