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. Chrome follows this part of the spec since version 149, but Safari and Chrome 148 and earlier keep the previous scroll position instead.

As a workaround, you can listen to the navigatesuccess event and scroll to the top manually. This is harmless in browsers that already follow the spec, since the page is already at the top:

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");