封装Link组件问题

来源：6-7 【路由搭建】Link 与动态导航

Zhang_Kyra

2021-07-12

xport const UseLink : React.FC = ({to,children}) => {

const history = useHistory();
return(
    <a href={to} >
        {children}
    </a>
)

}

export const ProductImage: React.FC = ({id, size, imageSrc, price, title}) => {

//const history = useHistory();
return (
  <UseLink to={`/detail/${id}`}>
  ...
  /UseLink>

a标签中不加onclick事件，点击图片也可以跳转到detail页面，点击浏览器后退按钮，也可以回退到home页，不太明白onclick事件中history.push的作用。

写回答

1回答

阿莱克斯刘

2021-07-30

history.push中的history来源于reat-router-dom的钩子useHistory，使用history以后react-router会接管并且挟持浏览器历栈，可以对历史记录做更灵活的操作。不用onclick等于在用浏览器的默认历史管理方式。

React18 系统精讲结合TS打造旅游电商平台

React18 精讲 + 结合 TS 实战 + 热门业务开发，获取必备技能

2017 学习 · 1031 问题

相似问题

回答 1

回答 1

回答 1

回答 1

回答 1