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)Intento de error de importación: 'withRouter' no se exporta desde 'react-router-dom'. ¿Cómo debo reemplazar esto en v6?
withRouter está obsoleto en react-router v6. Deberías usar ganchos en su lugar.
En este caso, use useNavigate , así:
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> ); };