React.js中如何封装history.push相关onClick代码以避免重复编写？

完全可以封装，根据复用范围可以选择两种实现方式：

同组件内复用 #

直接在组件内定义高阶函数生成点击处理逻辑即可：

// 组件内定义
const handleGoToPostReview = (postId) => (e) => {
  e.preventDefault();
  history.push(`/Post-Review/${postId}`);
};

调用时直接绑定到onClick属性：

onClick={handleGoToPostReview(tagResult.PostId)}

跨组件全局复用 #

可以封装为自定义Hook，适配不同版本的react-router：

react-router v5 版本 #

// src/hooks/useGoToPostReview.js
import { useHistory } from 'react-router-dom';

export default function useGoToPostReview() {
  const history = useHistory();
  return (postId) => (e) => {
    // 加可选链防止直接调用函数时报错
    e?.preventDefault();
    history.push(`/Post-Review/${postId}`);
  };
}

组件内使用：

import useGoToPostReview from '@/hooks/useGoToPostReview';

// 组件内部调用Hook生成处理函数
const goToPostReview = useGoToPostReview();

// 绑定事件
onClick={goToPostReview(tagResult.PostId)}

react-router v6 版本 #

v6废弃了useHistory，替换为useNavigate，仅需修改Hook内部逻辑：

// src/hooks/useGoToPostReview.js
import { useNavigate } from 'react-router-dom';

export default function useGoToPostReview() {
  const navigate = useNavigate();
  return (postId) => (e) => {
    e?.preventDefault();
    navigate(`/Post-Review/${postId}`);
  };
}

使用方式和v5完全一致。

如果不需要拦截默认事件（比如绑定到普通button而非a标签），也可以直接调用函数触发跳转：

goToPostReview(你的文章ID)()

内容的提问来源于stack exchange，提问作者user16364975