Synchronize filters with URL history

Keep filter controls and browser history in sync across reload, back, and forward navigation.

MediumReact Routing

50 min0% acceptance

Description

Build UrlSyncedFilters with an injected history adapter. Synchronize query text, status (all, draft, or published), and owner; parse the initial URL; write canonical query strings; preserve unrelated parameters; restore state from navigation events; and prevent history feedback loops.

Requirements

Export a UrlSyncedFilters component from src/App.tsx.
Initialize all filter controls from the URL returned by history.read().
Write filter parameters in a deterministic canonical order and omit default values.
Preserve query parameters that are not owned by the filter component.
Restore controls from URLs delivered by the history subscription.
Repeated back and forward events produce the state represented by each emitted URL.
Applying a navigation event does not push or replace the same URL again.
Unsubscribe from history when the component unmounts or its adapter changes.

Refresh-safe filters

Input

/documents?status=archived&owner=me&utm=launch

Expected output

Archived and Me are selected; utm remains in the URL

Explanation

Only owned filter keys may be rewritten.

Back navigation

Input

Change status twice, then emit the prior URL

Expected output

Controls return to the prior status without another push

Explanation

Navigation events update state but must not echo into history.

Constraints

Support query, status, and owner controls; status values are all, draft, and published
Do not access window.history directly
Do not remove unrelated query parameters or the current pathname

Hints

Hint 1

Centralize parsing and canonical serialization as pure helpers.

Hint 2

Track whether a state transition came from controls or the history subscription.

Hint 3

Compare canonical URLs before writing to avoid no-op history entries.

ReactURLSearchParamshistory