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 ponent

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?

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 ponent

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?

• javascript
• reactjs
• typescript
• react-router
• frontend

• which version of react-router you are using ? – Aaqib Commented Oct 27, 2017 at 21:10

1 Answer 1

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