NavigationStoreclass

new NavigationStore(url: PossibleURL = typeof window === "undefined" ? "/" : window.location.href, base?: PossibleURL)
ParamType
urlPossibleURL
Values that can be converted to a URL instance. Defaults to typeof window === "undefined" ? "/" : window.location.href
basePossibleURL
Values that can be converted to a URL instance.
Return
NavigationStore
Store holding the current navigation URL and driving browser history.

Store holding the current navigation URL and driving browser history.

  • Extends URLStore; the current location is its value.
  • forward() pushes a new history entry; redirect() replaces the current one.
  • TODO: switch to the browser Navigation API when broadly supported.

The store holding the current navigation URL and driving browser history. It extends URLStore — the current location is its value — and is owned by <Navigation>. Reach for it via requireNavigation() rather than constructing your own.

Things to know:

  • forward() pushes a new browser history entry; redirect() replaces the current one. Both resolve the destination against the store's base.
  • It is a shelving/store URLStore, so components can subscribe to it for re-renders.

Usage

tsx
import { requireNavigation } from "shelving/ui";

function LogoutButton() {
  const nav = requireNavigation();
  return <Button onClick={() => nav.redirect("/login")}>Log out</Button>;
}

Constructed directly only when wiring navigation by hand (e.g. tests):

tsx
import { NavigationStore } from "shelving/ui";

const nav = new NavigationStore("/");
nav.forward("/home");

Methods

Go

NavigationStore.forward()method

Navigate forward to a URL, pushing a new browser history entry.

forward(possible: PossibleURL): void
Go

NavigationStore.redirect()method

Redirect to a URL, replacing the current browser history entry.

redirect(possible: PossibleURL): void