1

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


const MenuItem =({title,imageUrl,size,history,linkUrl,match})=>(
    <div 
     className={`${size} menu-item`} onClick={()=> history.push(`${match.url}${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 withRouter(MenuItem)

Attempted import error: 'withRouter' is not exported from 'react-router-dom'. how should I replace this in v6

wahid_ull_islam
  • 13
  • 2
  • https://v5.reactrouter.com/web/api/withRouter you're using `'react-router-dom'` but it is `"react-router";` `import { withRouter } from "react-router";` – Mani Nov 18 '21 at 11:03
  • It is deprecated in v6. Please see [this answer](https://stackoverflow.com/a/62877124/8943092). – It'sNotMe Nov 18 '21 at 11:04

1 Answers1

1

withRouter is deprecated in react-router v6. You should use hooks instead.

In this case, use useNavigate, like this:

import { useNavigate } from "react-router-dom";

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

  return (
    <div
      className={`${size} menu-item`}
      onClick={() => navigate(`${match.url}${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>
  );
};
Cuong Vu
  • 3,423
  • 14
  • 16
  • onClick={() => navigate(`${match.url}${linkUrl}`)} is that okk ??? its give me an error and i remove the matchurl now its okk tnx for help – wahid_ull_islam Nov 18 '21 at 19:33