Community JavaScript Snippet

Three React Router v4 Recipes I Inherit With Old Codebases

RRv4 still survives in long-running codebases. Three recipes I keep paged in: programmatic navigation via withRouter, query parsing, and a custom history singleton for non-React callers.

Three React Router v4 Recipes I Inherit With Old Codebases

RRv4 still survives in long-running codebases. Three recipes I keep paged in: programmatic navigation via withRouter, query parsing, and a custom history singleton for non-React callers.

JavaScript
Frontend
3 snippets
react
design-patterns
references
freyadiallo

By @freyadiallo

March 3, 2026

·

Updated May 18, 2026

1,001 views

31

4.1 (11)

Programmatic navigation in RRv4 is the recipe everyone needs and nobody can find in the docs on the first pass. The component must have access to props.history to call history.push, which means either the component is rendered inside a <Route render={...} /> (where router props are passed automatically) or it is wrapped in withRouter (which injects them via context). I prefer withRouter for any deeply-nested form because the consumer stays a regular function component and the navigation is trivially testable: pass a stub history in the unit test, assert history.push was called with the right arguments. The state argument to push(to, state) is the second-most-useful piece: a small object you tuck into the location stack so the destination route can read context like from: 'login' without a query string.