Upgrade react-router Failed prop type: The prop `history` is marked as required in `Router`, but its value is `undefined`

Question

I upgrade react-router@3.2.0 to react-router@4.3.1 and I got error:

Failed prop type: The prop history is marked as required in Router , but its value is undefined .

import React from "react";
import { render } from "react-dom";
import { Provider } from "react-redux";
import { browserHistory, hashHistory, Router } from "react-router";


<Provider store={store}>
  <Router history={hashHistory} routes={getRoutes(store)} />
</Provider>,
document.getElementById("app")

Maybe someone knows how to fix this issue?

Answer 1

react-router-dom@4.3.1 doesn't export any hashHistory object, so hashHistory , and history on the router, is undefined. If you are trying to use react-router-dom@4.3.1 then you'll need to create the history object a little differently by importing createHashHistory from the history package ^* .

import { Router } from "react-router";
import { createHashHistory } from 'history'; // * note on history

const hashHistory = createHashHistory();

...

<Router history={hashHistory}>
  <App />
</Router>

* Note: I didn't need to install history as a dependency in my test sandbox , but if it matters and you do need to list it as a dependency ensure you have history@4 installed. The latest history@5 is used with react-router-dom@6 .

You could also just import and render the HashRouter .

import { HashRouter as Router } from "react-router";

...

<Router>
  <App />
</Router>

I did notice several React warnings in the console trying to use such an old version of react-router with newer versions of react . react-router v4 and v5 are generally considered to be the "same version", though I don't recall the specifics that forced them to do a "major" version bump partway through nor do I care to go spelunking for them. Chances are you can go ahead and bump to at least react-router@5 ( 5.3.4 as of the time of this post ) without any major ill-effects, the code above is the same.

With react-router@6 came a ton of breaking changes. Starting with your comment about "When I upgrade to 6.8.0 I get different error Uncaught TypeError: Cannot read properties of undefined (reading 'pathname')", this issue is caused by using the low-level Router component instead of one of the high-level routers, like HashRouter . The Router has a couple required props, and history isn't one of them. It is the location prop being undefined that the router can't read any pathname property of.

See v6 Router

declare function Router( props: RouterProps ): React.ReactElement | null; interface RouterProps { basename?: string; children?: React.ReactNode; location: Partial<Location> | string; // <-- REQUIRED? navigationType:; NavigationType: navigator; Navigator? // <-- REQUIRED: static;: boolean; }