NavigationStoreclass

new NavigationStore(url: PossibleURL = typeof window === "undefined" ? "/" : window.location.href, base?: PossibleURL)
ParamType
urlPossibleURL
The initial URL (defaults to the browser's window.location.href, or "/" when there is no window, e.g. during server rendering). Defaults to typeof window === "undefined" ? "/" : window.location.href
basePossibleURL
Optional base URL that relative navigations resolve against.
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");

Examples

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