为了避免重复代码，请始终使用atomic design。首先，编写一个单独的组件。

export default function Btn(props) {
  return (
    <button
      type="button"
      onClick={() => window.open(`${props.link}`)}>
      {props.text}
    </button>
  )
}

然后，在您的代码中，您只需要导入它并按如下方式使用它：

import Btn from '@/components/global/atoms/Btn'

{/* Here goes the rest of your code */}

<Btn
  link="https://www.mywebsite.com"
  text="Button Text"
></Btn>

如果你已经在使用react-router-dom，你可以直接使用历史记录或者根据你正在使用的版本导航。如果你正在使用低于6的版本，你可以使用

export function App(props) {
  const history = useHistory();
  return (
    <div className='App'>
      <button 
      onClick={() => history.push("/moveToHere")}
      >Click Me</button>
    </div>
  );
}

但是如果你使用react-router-dom@6^，那么你可以使用这个包自带的navigate。

export function App(props) {
  const history = useNavigate();
  return (
    <div className='App'>
      <button 
      onClick={() => navigate("/moveToHere")}
      >Click Me</button>
    </div>
  );
}

通过这些函数调用，您还可以在此导航和存储在location状态中的参数之间传递参数，这些参数可以通过使用useLocation挂钩取消引用。

将可交互元素嵌套在其他可交互元素中通常被认为是糟糕的UI/UX，但是如果您绝对必须将按钮嵌套在链接中，并且***不***希望按钮触发链接操作，那么您应该防止单击事件传播到Link组件。
代码的问题在于按钮的onClick事件对象未转发到回调。

onClick={(e) => changeImageNext(actualData.id, actualData.path)}

它应该是
x一个一个一个一个x一个一个二个x
这只是我的一个偏好，但我喜欢编写curry onClick回调处理程序，因为它使代码更简单，但如果您不熟悉curry，则会以可读性为代价。其思想是回调将立即被调用并传递Map的参数，并返回一个函数，该函数接受onClick事件对象以用作onClick处理程序函数。
示例：

function changeImagePre(id, images) {
  return (e) => {
    e.stopPropagation();
    ... // id and images closed over in callback scope
  };
}

return (
  <div>
    {posts.map((actualData) => (
      <Link to={`/${actualData.id}`} key={actualData.id}>
        <div className='format_link'>
          <div className='image_link'>
            <div className='image'>
              <img
                className='images'
                id={actualData.id}
                src={getImage(actualData.path, 0)}
                alt='Italian Trulli'
              />
              <button
                className='arrow right'
                id={'button' + actualData.id}
                onClick={changeImageNext(actualData.id, actualData.path)}
              >
                {'>'}
              </button>
              <button
                className='arrow left'
                id={'button' + actualData.id}
                onClick={changeImagePre(actualData.id, actualData.path)}
              >
                {'<'}
              </button>
            </div>
          </div>
          <div className='desc_link'>
            <div className='event'>
              <div className='save'></div>
            </div>
          </div>
        </div>
      </Link>
    ))}
  </div>
)