Popstate Back Forward
Single-page applications must listen to the popstate event and restore the correct view state when the user navigates back or forward with browser controls.
$ aoe install @community/rule-popstate-back-forwardProjection
Always in _index.xml · the agent never has to ask for this.
PopstateBackForward [rule] v1.0.0
Single-page applications must listen to the popstate event and restore the correct view state when the user navigates back or forward with browser controls.
Loaded when retrieval picks the atom as adjacent / supporting.
PopstateBackForward [rule] v1.0.0
Single-page applications must listen to the popstate event and restore the correct view state when the user navigates back or forward with browser controls.
Meta
- License: Apache-2.0
- License Provenance: package-authorship-claim
Severity
high
Implementation
- React Router / Next.js: built-in if routes are mapped to pages — no manual popstate needed
- Custom SPA: window.addEventListener('popstate', (e) => restoreState(e.state))
- Serialize view state into history.pushState(stateObject, '', url) when navigating
- On popstate: read e.state, restore scroll position, restore focused element, re-fetch if needed
- Test: navigate forward 3 pages, hit back 3 times — all states must be correct
Loaded when retrieval picks the atom as a focal / direct hit.
PopstateBackForward [rule] v1.0.0
Single-page applications must listen to the popstate event and restore the correct view state when the user navigates back or forward with browser controls.
Meta
- License: Apache-2.0
- License Provenance: package-authorship-claim
Severity
high
Implementation
- React Router / Next.js: built-in if routes are mapped to pages — no manual popstate needed
- Custom SPA: window.addEventListener('popstate', (e) => restoreState(e.state))
- Serialize view state into history.pushState(stateObject, '', url) when navigating
- On popstate: read e.state, restore scroll position, restore focused element, re-fetch if needed
- Test: navigate forward 3 pages, hit back 3 times — all states must be correct
Relations
related: [@community/rule-save-form-progress, @community/rule-no-state-reset-without-confirm, @community/fact-user-control-freedom]
Rationale
Browser back/forward navigation is the #1 UI pattern users depend on. SPAs that manage their own routing via history.pushState must also handle history.popstate, or back/forward silently loads the wrong state while the URL changes.
Meta
- License: Apache-2.0
- License Provenance: package-authorship-claim
Severity
high
Implementation
- React Router / Next.js: built-in if routes are mapped to pages — no manual popstate needed
- Custom SPA: window.addEventListener('popstate', (e) => restoreState(e.state))
- Serialize view state into history.pushState(stateObject, '', url) when navigating
- On popstate: read e.state, restore scroll position, restore focused element, re-fetch if needed
- Test: navigate forward 3 pages, hit back 3 times — all states must be correct
Source
aoe-engine/examples/frontend-design/primes/compiled/@community/rule-popstate-back-forward/atom.yaml