React styled-components中<a>标签链接点击无响应问题求助

你的链接无法跳转的核心原因是Wrapper组件设置了z-index: -1。

这个样式会让整个Wrapper容器（包含里面的所有内容，包括你的Redirect链接）处于页面其他默认层级元素的下方，点击事件会被上层元素（比如body）拦截，导致实际点击不到链接元素，看起来就像点击普通文本一样。

修复方案 #

移除Wrapper中的z-index: -1属性，或者将其设置为大于等于0的值：

export const Wrapper = styled.div`
    display: flex;
    flex-direction: column;
    position: relative;
    margin-top: 5vh;
    // 删掉这一行 z-index: -1;
    margin: 10vh 15vw;
`

补充说明 #

z-index的默认值是auto（等效于0），当元素设置为负数z-index时，会被所有默认层级的元素覆盖，即使你的Redirect是标准的<a>标签，也无法接收到点击事件。调整z-index后，链接就能正常触发跳转行为了。

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