History
import { History } from 'cx/ui'; Copied The History class handles HTML5 pushState navigation, connecting the browser URL to your store.
Setup
Connect History to your store at application startup:
History.connect(store, "url");The store is updated whenever navigation happens, allowing the application to re-render and display relevant content.
Methods
| Method | Description |
|---|---|
History.connect(store, bind) | Initializes a link between browser’s location and store variable pointed by the bind argument |
History.pushState(state, title, url) | Performs navigation to a new location without refreshing the page |
History.replaceState(state, title, url) | Performs navigation to a new location. Current location will not be saved in browser’s history. |
History.subscribe(callback) | Subscribe to location changes. Useful for setting up page tracking (e.g. Google Analytics). Returns an unsubscribe function. |
History.reloadOnNextChange() | Instructs the router to reload the page on next navigation. Commonly used with service workers. |
History.addNavigateConfirmation(callback, permanent) | Instructs the router to execute the given callback to confirm leaving the current page. The callback is executed only for the current page, unless permanent is set to true. |
Programmatic Navigation
// Add to history (back button will return here)
History.pushState({}, null, "~/dashboard");
// Replace current entry (back button skips this)
History.replaceState({}, null, "~/dashboard");Subscribing to Navigation
Track page views or perform actions on navigation:
History.subscribe((url) => {
analytics.trackPageView(url);
});Navigation Confirmation
Prompt users before they leave a page with unsaved changes:
History.addNavigateConfirmation((url) => {
return MsgBox.yesNo("You have unsaved changes. Leave anyway?").then(
(answer) => answer === "yes",
);
});The callback receives the target URL and should return a boolean or Promise<boolean>. By default, the confirmation is removed when leaving the page. Pass true as the second argument to make it permanent.
Browser Support
Browsers without pushState support fall back to standard navigation (full page reload).