Uncaught TypeError: (0 , _reactRouter.withRouter) is not a function when navigating to route programmatically in react-router 2.4.0

Question

I am using react-router 2.4.0 and want to link to another route programmatically (what I did before using <Link>).

It's explained nicely in this SO post where they say in 2.4.x you should use the decorator pattern with withRouter, so I am using the following code:

import {withRouter} from 'react-router' // further imports omitted


class CreateJobItemFormRaw extends React.Component {
  ...
}

const CreateJobItemForm = withRouter(CreateJobItemFormRaw)
export default CreateJobItemForm

Then in other files, I use

import CreateJobItemForm from './CreateJobItemForm'

However, with this approach my app doesn't render at all any more and the console outputs:

CreateJobItemForm.js:76 Uncaught TypeError: (0 , _reactRouter.withRouter) is not a function

Can anyone help me solve this?

Answer 1

I trust that you are in fact using react-router 2.4.0, but in my case it was worth double-checking that my package.json did in fact enforce that version. I modified my package.json as such:

"dependencies": {
  "react-router": "^2.4.0",
  ...
}

Hope this helps.

Answer 2

In my case, I upgraded to react-router v6 and discovered that withRouter was removed and hooks should be used instead.

Upgrade documentation here: https://reactrouter.com/docs/en/v6/upgrading/v5#upgrade-to-react-router-v51

Along with the upgrade to v5.1, you should replace any usage of withRouter with hooks.

Here is a detailed guide to hooks: https://reacttraining.com/blog/react-router-v5-1/