Signature

function useNavigation(): {
  state: "idle" | "loading" | "submitting";
  location: URL | undefined;
};

Parameters

Takes no arguments and requires RouterProvider. The application mounting helpers also install retained-view navigation, which exposes the pending destination.

Returns

Returns { state, location }. state is idle, loading, or submitting. location is the pending URL under either RouterProvider or mountApplication, and undefined when idle. Retained navigation keeps the visible URL separate until the destination commits.

Example

Use page navigation state for page-level feedback. A fetcher has its own state and should render its own pending feedback.

import { useNavigation } from "@kasperrt/smolter/preact";

export function NavigationStatus() {
  const navigation = useNavigation();
  const busy = navigation.state !== "idle";

  return <span role="status">{busy ? "Updating page…" : ""}</span>;
}

Retained views

During a retained navigation, the displayed page and its data remain together until the destination can commit. Use location for the pending destination when present; useURLLocation describes the visible snapshot. This hook does not expose formData, formMethod, or a nested match list.