Skip to content

Upgrading react-router-dom 4 to 5

Breaking4.3.1 → 5.3.4Breaking8Security2Deprecated2New14Changed16Fixed30Other6

Full comparisonBack to react-router-dom
BreakingUpgrade verdict

8 breaking changes and 2 security fixes.

In plain terms
  • The deprecated React lifecycle methods are no longer used internally.
  • You can no longer import single files directly from the package; import from the package entry point instead.
  • If you import some components one way and others another way, they come from different builds with separate context, so Router and Route stop working together.
  • The library no longer uses two old React lifecycle methods that React is phasing out.
Must act Top 5 of 12 that need code or config changes

Adds @babel/runtime ^7.12.13, tiny-invariant ^1.0.2, tiny-warning ^1.0.0.

Drops invariant, warning.

Installs 15 packages in all (was 17).

What you must change

Breaking8
Removes deprecated lifecycle methods componentWillMount and componentWillReceiveProps.
componentWillMountcomponentWillReceiveProps
5.0.0GitHub ReleaseSummarizedView source
CJS and ESM builds now use Rollup, and requiring individual files from any package is no longer supported.
require('react-router/Route')
4.4.0-beta.2GitHub ReleaseSummarizedView source
Mixing CommonJS and ES module imports of react-router-dom no longer works and causes a Route outside a Router warning.
BrowserRouterRouteRouter
4.4.0-beta.1GitHub ReleaseSummarizedView source
Removes all traces of the deprecated componentWillMount and componentWillReceiveProps lifecycle methods.
componentWillMountcomponentWillReceiveProps
4.4.0-beta.0GitHub ReleaseSummarizedView source
Accessing the old context API now fails; use withRouter() or a <Route/> instead.
withRouter()<Route/>
5.0.0GitHub ReleaseSummarizedView source
Mixing per-file imports with package imports now throws an exception due to the new context API.
BrowserRouterRoute
5.0.0GitHub ReleaseSummarizedView source
Development mode throws an error when combining CJS and ESM builds.
5.0.0GitHub ReleaseSummarizedView source
Accessing the private context API now breaks; use a <Route> or withRouter instead.
RoutewithRouter
4.4.0-beta.0GitHub ReleaseSummarizedView source
Security2
Removes use of eval in development to comply with unsafe-eval CSP.
eval
5.0.0GitHub ReleaseSummarizedView source
Stops using eval in development to comply with the unsafe-eval CSP.
eval
4.4.0-beta.8GitHub ReleaseSummarizedView source

Deprecations to plan for

Deprecated2
Notes that activeClassName and activeStyle props are removed completely as of v6.0.0-beta.3, so functional className and style ease the v5 to v6 upgrade.
activeClassNameactiveStyleclassNamestyle
5.3.0GitHub ReleaseSummarizedView source
Per file imports are deprecated and will be removed in a future major version; a warning is logged.
5.0.0GitHub ReleaseSummarizedView source