我说的不工作，并不意味着它们不加载所连接的页面。我的意思是，浏览器显然甚至没有看到它们。点击什么也不做，悬停时光标没有变化，右键点击没有提供“打开链接”或“在新标签页中打开链接”的选项。就像它们根本不存在一样。
我在多个浏览器和多个设备上都试过了，同样的问题。
这些链接是这样写的：

<div className={`${styles.listItem} ${styles.spotify}`}>
        <a
          className={styles.link}
          href="https://open.spotify.com/artist/01MMcY0GSuDXOTUhyt4ung?si=YIgtCiw5SR26TejkA7dOcg&utm_source=copy-link&nd=1"
          target="_blank"
        />
</div>

我唯一能想到的就是把标签 Package 起来，而不是反过来。这只会让它更糟糕。图标甚至不会那样显示。我试着用dev工具检查图标，带有正确href的标签在那里。
这是网站的最新版本，问题出在页面底部“联系人”部分的社交媒体图标上。
https://kmac-website-g8cm3chxl-a-shotwell.vercel.app/
下面是整个组件的代码：

import React from "react";
import styles from './Social.module.css'

const Social = () => {
  return (
    <div className={styles.main}>
      <h1 className={styles.banner}>REACH OUT.</h1>
      <div className={styles.socialContainer}>
        <div className={styles.listContainer}>
          <div className={`${styles.listItem} ${styles.spotify}`}>
            <a
              className={styles.link}
              href="https://open.spotify.com/artist/01MMcY0GSuDXOTUhyt4ung?si=YIgtCiw5SR26TejkA7dOcg&utm_source=copy-link&nd=1"
              target="_blank"
            />
          </div>
          <div className={`${styles.listItem} ${styles.facebook}`}>
            <a
              className={styles.link}
              href="https://www.facebook.com/MixITMac"
              target="_blank"
            />
          </div>
          <div className={`${styles.listItem} ${styles.instagram}`}>
            <a
              className={styles.link}
              href="https://www.instagram.com/kmacxkmc/"
              target="_blank"
            />
          </div>
          <div className={`${styles.listItem} ${styles.twitter}`}>
            <a
              className={styles.link}
              href="https://twitter.com/KTHAMC1"
              target="_blank"
            />
          </div>
        </div>
      </div>
    </div>
  );
};

export default Social

任何帮助都将不胜感激。谢谢。