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

Viewed 825

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>
0 Answers
Related