问题是，当您单击<img>时，target未设置为您的<a>标记，因此event.target.href为undefined。
请不要使用onclick属性，而是使用委派的事件侦听程式，并检查它是否源自<a>标签或子代。

document.addEventListener("click", (e) => {
  const anchor = e.target.closest("a[href]");
  if (anchor) {
    e.preventDefault();
    window.history.pushState({}, "", anchor.href);
    handleLocation();
  }
});

演示~https://jsfiddle.net/dgn1r5zh/

发生这种行为是因为event.target是对触发事件的元素的引用。在本例中，它是您的图像。
首先，我要指出的是，不应该使用内联事件处理程序。它们会产生意想不到的行为，让你在HTML中编写JS。更多关于这个主题的信息。学习使用addEventListener。
您可以通过添加一些CSS到您要单击的元素来解决您的问题。使用CSS pointer-events，您可以确定一个元素是否应该能够成为target。
通过选择元素中所有要作为目标的元素，并设置pointer-events: none;以禁用这些元素上的指针事件来实现这一点。这确保了<a>标记是唯一可以被视为target的元素。因此，代码中的event.target将始终指向正确的元素。

.mainServices-section * {
  pointer-events: none;
}

或者，如果您无法使用pointer-events，例如，因为您需要在.mainServices-section的子系上引发其他指标事件，则您应该明确检查目前的目的是否为<a>标签，否则请尽可能选取<a>标签，以扩充您的程式码。
你可以从点击的元素上的closest元素中的任何子元素中搜索<a>，它会向上搜索你要搜索的元素。

const route = (event) => {
  const target = event.target.closest('.mainServices-section');
  if (target === null) {
    return;
  }

  event.preventDefault();
  window.history.pushState({}, "", target.href);
  handleLocation();
};

const mainServicesSections = document.querySelectorAll('.mainServices-section');
for (const mainServiceSection of mainServicesSections) {
  mainServiceSection.addEventListener('click', route);
}

您需要查找所单击元素ev.target的.closest("a")：
第一个
我更改的另一件事是查找<a>元素的href属性的方式：DOMelement.href将返回一个绝对路径，以“https：//”开头，而DOMelement.getAttribute("href")实际上将获取元素属性中定义的字符串。