React Router v4 - 样式链接组件的有效方式

Question

在React Router v4中设置<Link>组件的最佳方法是什么？如果<Link>只是一个锚标签，它不应该嵌套在里面的<button>元素。它也不应该嵌套在按钮内（因为它没有任何意义），所以最有效的方法是将它设置为按钮。这种方法的缺点是什么？

Answer 1

自从添加了accessibility标签后，我将从这个角度回答。

首先确定您是否需要链接或按钮。链接用于导航目的。它会将您带到另一个页面或当前页面上的其他位置。按钮用于执行操作。

因此，您需要决定用户选择元素时应该发生什么。您是导航（链接）还是执行操作（按钮）？

如果您使用链接并将其设置为按钮，因为您希望执行操作，例如“添加到购物车”或“注册”或“登录”，则需要处理以下几个辅助功能问题：

• 链接的role需要设置为button
• 您需要添加键盘处理程序以允许空格键激活链接。输入将已经起作用，但空间不是链接的本机操作。当角色设置为“按钮”时，屏幕阅读器会将元素作为按钮通知，并告诉用户“按空格键激活”，因此您需要处理该键。

但是，如果您只使用<button>而不是<a>，则可以更轻松地解决此问题。见first rule of ARIA。