I am trying to kick off a new project using React
and TypeScript
,
one of the things I stuck with is Router
, for some reason TypeScript does not acknowledge history
property, though it should be available according to the documentation.
My component
import * as React from 'react'
import * as ReactDom from 'react-dom'
import { Provider } from 'react-redux'
import { BrowserRouter as Router} from 'react-router-dom';
import createBrowserHistory from 'history/createBrowserHistory'
let history = createBrowserHistory();
ReactDom.render(
<Provider>
<Router history={history} > {/* Error is in this line */}
<div />
</Router>
</Provider>,
document.getElementById('app')
);
Error message:
Error:(11, 11) TS2339:Property 'history' does not exist on type 'IntrinsicAttributes
& IntrinsicClassAttributes<BrowserRouter> & Readonly<{ children?: ReactNode; ...'.
How can I make it work?
if you are using react-router-v4
You can not pass a history to a <BrowserRouter>
, as it creates its own history object
If you are creating your own history Object use <Router>
instead of <BrowserRouter>
and then pass history object
import { Router } from 'react-router-dom'
<Router history={history}> <Router/>
You can read more on history in react-router-v4
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With