反应反应路由器dom [重复]

Question

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)

尝试导入错误：“withRouter”未从“react-router-dom”导出。我应该如何在 v6 中替换它

Answer 1

withRouter 在 react-router v6 中是 deprecated。你应该改用钩子。

在这种情况下，使用useNavigate，如下所示：

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