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
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>
);
};