react-router history and typescript not working - Overload 1 of 2, '(props: RouterProps | Readonly<RouterProps>): Router'

Question

I am simplifying trying to setup history with react-router-dom but for some reason TS does not like me in this regard!

history.ts

import { createBrowserHistory } from 'history';
export default createBrowserHistory();

root/app.tsx

import { Router } from 'react-router-dom';

import { Routes } from 'Routes';

import history from 'routerHistory';

function App() {
  return (
      <Router history={history}>
        <Header />
        <Routes />
      </Router>
  );
}

export default App;

TS Error

No overload matches this call.
  Overload 1 of 2, '(props: RouterProps | Readonly<RouterProps>): Router', gave the following error.
    Type 'BrowserHistory<State>' is missing the following properties from type 'History<unknown>': length, goBack, goForward
  Overload 2 of 2, '(props: RouterProps, context: any): Router', gave the following error.
    Type 'BrowserHistory<State>' is not assignable to type 'History<unknown>'.  TS2769

    15 |       <ToastContainer />
    16 |       <GlobalStyle />
  > 17 |       <Router history={history}>
       |               ^
    18 |         <Header />
    19 |         <Routes />
    20 |       </Router>

Answer 1

To anyone still having this issue, it is related to incompatible versions within the package.lock.json file. I found that using the following combination in your package.json works:

"react-router-dom": "6.3.0",
"history": "5.2.0"

If this doesn't work for you, but you have a working version that breaks whenever you delete the package.lock.json file, here is how to solve it:

• open your package.lock.json file
• search for react-router-dom
• note down the version of react-router-dom and it's dependency's version of history
• add those two version to your root package.json file (without ^ at the version beginning, to lock down the working versions)