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>