Reactjs 使用特定字体设置样式时，无法单击React router链接

因此，使用字体设置第二个

li

的样式会使其具有正确的外观，但会阻止

Link

生成我可以单击的链接

renderLinks(){
     if (this.props.authenticated) {
          return [
              <li key="1" className="user-info" >
                  {this.props.email}
              </li>,
              <li key="2" className="sign-out">
                  <Link to="signout">Sign Out</Link>
              </li>
          ]
        } else {
            return [
                ...
            ]
    }
}

如果我像上面那样注释掉字体规则，我会得到一个有效的

链接

。但是如果我使用字体，我就不能点击链接（即使锚标记似乎出现在DOM中）

发生了什么事

即使是内联样式也会破坏

链接

---

直接在链接上而不是在

li

上应用此内联样式

style={{fontFamily:'KnockoutHTF34JuniorSumo'}}

，我正在使用相同的样式，其工作方式与预期相同：）我这样做了，并重试了一次。没有快乐。仍然不可单击。我试图复制您的案例，但似乎效果良好（请检查

Page1

组件中的

li

）。你能不能创建一个JSFIDLE或webpackbin并重现错误。检查一下我使用的这个小提琴的样式和它的工作原理：谢谢大家。。。我把范围缩小到字体的选择。某些字体会破坏单击功能，而其他字体则不会。这也同样神秘！听说过这样的事吗？我使用的所有webfonts都是从ttf或otf转换而来的。这很难在小提琴中重现。

.sign-out {
    text-decoration: none;
    //font: 10pt 'KnockoutHTF34JuniorSumo';
}