'withRouter' is not exported from 'react-router-dom'

Question

Failed to compile. Attempted import error: 'withRouter' is not exported from 'react-router-dom'.

My code like, also I have installed react-router-dom an react-route and I have respin the app 10 time now

import React from 'react';
import {withRouter} from 'react-router-dom';

import './menu-item.scss';

const MenuItem = ({ title, imageUrl, size, history }) => (
  <div className={`${size} menu-item`}>
    <div
      className='background-image'
      style={{
        backgroundImage: `url(${imageUrl})`,
      }}
    />
    <div className='content'>
      <h1 className='title'>{title.toUpperCase()}</h1>
      <span className='subtitle'>SHOP NOW</span>
    </div>
  </div>
);

export default withRouter(MenuItem);

Solution 1

If you accidentally installed react-router-dom v6 then the withRouter HOC no longer exists. Either revert back to v5.x or roll your own custom withRouter HOC to inject the props you need. Or convert the components to function components and use the React hooks.

There is now also no longer a history object to use, it was replaced by a navigate function accessed via the useNavigate hook. It's not clear where history was being used previously, but if you need to imperatively navigate the following is how you access the navigation. If staying with v6 then the following is how to access the navigate function.

import React from 'react';
import { useNavigate } from 'react-router-dom';

import './menu-item.scss';

const MenuItem = ({ title, imageUrl, size }) => {
  const navigate = useNavigate();

  // navigate("/targetPath")

  return (
    <div className={`${size} menu-item`}>
      <div
        className='background-image'
        style={{
          backgroundImage: `url(${imageUrl})`,
        }}
      />
      <div className='content'>
        <h1 className='title'>{title.toUpperCase()}</h1>
        <span className='subtitle'>SHOP NOW</span>
      </div>
    </div>
  )
};

export default MenuItem;

Solution 2

You can use useLocation hook and destructure 'pathname' property from it to make the navigated link in the onClick() function dynamic.

Here's a sample of the code that worked for me:

  import React from "react";
  import { useLocation, useNavigate } from "react-router-dom";
  import "./menu-item.styles.scss";

  const MenuItem = ({ title, imageUrl, size, linkUrl, match }) => {
    let navigate = useNavigate();
    // destructured "pathname" property from useLocation()
    let { pathname } = useLocation();
    // consoloe.log(pathname)
    return (
      <div className={`${size} menu-item`} onClick={() => navigate(`${pathname}${linkUrl}`)}>
        <div
          className="background-image"
          style={{
            backgroundImage: `url(${imageUrl})`,
          }}
        />
        <div className="content">
          <h1 className="title">{title.toUpperCase()}</h1>
          <span className="subtitle">SHOP NOW</span>
        </div>
      </div>
    );
  };

  export default MenuItem;

Solution 3

thanks to Drew Reese -great shout-, and similar to Switch ( will throw the same error ) here is the downgrade command, just make sure you are in the right directory

npm install [email protected]

Comments

[Yusuf]

great shout, and similar to Switch ( will through the same error ) here is the downgrade command, just make sure you are in the right directory npm install [email protected]

[Drew Reese]

FYI, it looks like 5.3.0 is the latest v5.x version as of today, but v5.2.1 has been stable for a long time. It seems to run without issue in the codesandboxes I've been testing in.