Typescript does not allow me to use history in BrowserRouter

Question

Experimenting with react and I decided to test typescript.

code:

import { BrowserRouter } from 'react-router-dom'
import history  from './utilities/history'

ReactDOM.render(
  <BrowserRouter history={history}>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
)

history.js:

import { createBrowserHistory } from 'history'

export default createBrowserHistory()

error:

Type '{ children: Element; history: History; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly & Readonly<{ children?: ReactNode; }>'. Property 'history' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly & Readonly<{ children?: ReactNode; }>'.ts(2322)

package.json:

@types/react-router-dom": "^4.3.4",
react-router-dom": "^5.0.1",

When doing the exact same thing without typescript then the code works. I don't understand why this is happening, anyone that has an answer?

Yoni Gibbs Yoni Gibbs · Accepted Answer · 2019-08-21T15:19:48

BrowserRouter doesn't take in a prop called history. See here: https://reacttraining.com/react-router/web/api/BrowserRouter. There's a Router common low-level interface which has a history prop, but it doesn't look like BrowserRouter itself accepts that. So you could consider swapping to using Router.

See this answer for some more info: https://stackoverflow.com/a/45849608/10326373

Typescript does not allow me to use history in BrowserRouter

1 Answers