React SPA中的锚点或按钮? [英] Anchor or Button in React SPA?

问题描述

说在页面上有一段文本(无论它是被设置为传统"链接还是按钮)，都可以单击该文本，从而获得带有新页面/URL的新页面.但是导航是通过编程方式进行的(例如，使用History Web API通过react-router进行导航)，而不是强制执行HTTP刷新.

Say there is piece of text (regardless of whether it is styled as a "traditional" link or button) on a page that when clicked leads to a new page with a new page/URL. But the navigation happens programmatically (e.g. via react-router using the History web API) instead of a hard HTTP refresh.

在这种情况下，它应该是具有href属性(例如#)还是按钮的传统锚链接吗?

In this case, should it be a traditional anchor link with href attribute such as # or a button?

选项1 :

<a href="#" onClick={navigateToNextPage}>Link</a>

缺点是您有一个垃圾href属性.您可以删除它，但是它不在选项卡顺序中，并且没有默认的链接样式(尽管这些可以通过一次性样式解决).同样，如果您复制链接，它将被复制为#，这是不正确的，并且屏幕阅读器会错误地解释该错误.

The downside is that you have a junk href attribute. You could remove that but then it is not in the tab order and doesn't get default link styling (though these could be overcome with one-off styling). Also if you copy the link it will copy as # which is incorrect and be interpreted incorrectly by screen readers.

选项2 :

<button onClick={navigateToNextPage}>Link</a>

这里的缺点是，如果您希望它看起来像传统链接，则需要应用自定义样式.在我看来，它在某些方面也确实像传统链接一样.但这对于屏幕阅读器会更好.

The downside here is that if you want it to look like a traditional link you need to apply custom styling. Also in some ways it is really acting like a traditional link in my view. But this would be better for screen readers.

推荐答案

我无法评论React，但这是SPA的正确方法，在React中实现它应该很简单.

I can't comment on React but here is the correct method for SPAs, implementing it should be trivial in React.

如果没有其他选项可用，请使用超链接(<a>)在页面之间导航以及加载其他内容时.

Use a hyperlink (<a>) to navigate between pages and when loading additional content if no other option is available.

更简单:如果URL更改或您向页面添加了大量信息，请使用超链接.

More simply: if the URL changes or you add large amounts of information to the page, use a hyperlink.

在您的问题中，您提到了History API和react-router.

In your question you mentioned the History API and react-router.

基于这个原因，我认为函数navigateToNextPage会更改URL.

For this reason I assume that the function navigateToNextPage changes the URL.

我还假定，如果需要，可以通过在浏览器中输入该URL来直接访问该页面.

I also assume that I could access that page directly if I desired by entering that URL into my browser.

请牢记这些假设:-

<a href="new-page-url" onClick={navigateToNextPage}>Link</a>

很明显，您将停止默认操作(e.preventDefault()或React等效项).

Obviously you would stop the default action (e.preventDefault() or React equivalent).

为什么要使用上述格式的几点:-

A couple of points on why to use the format described above:-

1. 可访问性-当我遇到屏幕阅读器的超链接时，我可以问我的屏幕阅读器该链接将带我到哪里，这令人放心，我不能通过按钮来做同样的事情. 这就是为什么我不使用#作为超链接，而是添加了实际目的地的原因.如果看到href="#"，则几乎总是表明使用了错误的元素或使用了不正确的元素.在浏览完有关执行某项操作的评论后，仍然是完全有效的，请执行您的操作，然后重定向，直到今天结束时仍在导航.
2. 可访问性-当我通过屏幕阅读器导航网站时，我可能会决定循环浏览页面上的所有超链接，以了解页面的结构. (例如， NVDA修饰符 + K 以获得下一个链接).我不太可能遍历页面上的所有按钮以查找导航.
3. 可访问性-如果遇到链接，我期望要更改的页面(甚至通过AJAX).如果我遇到按钮，则希望它在当前页面上执行操作.预期的行为是可访问性的关键部分.
4. 可访问性-超链接具有一些重要的状态. 访问"是包含大量链接的页面上的关键部分，因为我可能想回顾一下我先前阅读的内容，并能够通过访问的链接进行导航(例如， NVDA修饰符 + K 用于所有未访问的链接).按钮不会显示此信息.这里重要的一点是，您也无法在CSS中使用button:visited为按钮设置样式，因此您会错过那里每个人的视觉提示.
5. 可访问性-空格键与 Enter 键.如果我希望进入链接，请按space键进行导航，而<button>键只能与 Enter 键配合使用，因此对于为什么页面没有更改，我可能会感到困惑. (我假设此时您已经使用了aria的负载使我确信此按钮是超链接).
6. 健壮性-如果您的网站功能有限，则 JavaScript失败时，超链接远胜于按钮.当JavaScript失败时 仍然可以使用，当 JavaScript失败可能只是一个页面的临时加载问题时，这特别有用.
7. SEO -我敢说关于Stack Overflow的SEO吗?耻辱！耻辱！耻辱！ :-P-但是很认真的说，尽管Google非常聪明，可以在JS支持的网站上做些什么，但它仍然很难找出仅JavaScript链接可以带上它的地方.如果SEO对您很重要，请使用具有有效目的地的超链接，以便Google可以正确映射信息.

1. Accessibility - when I encounter a hyperlink with a screen reader I am able to ask my screen reader where that link will take me, this is reassuring, I can't do the same with a button. This is why I didn't use # for the hyperlink but instead added the actual destination. If you see href="#" it is nearly always a sign that the wrong element is being used or it is being used incorrectly. After reading your comments about performing an action before navigating this is still perfectly valid, perform your action and then redirect, it is still navigation at the end of the day.
2. Accessibility - when I am navigating a site via a screen reader I may decide to cycle through all the hyperlinks on the page to get a feeling for the page structure. (NVDA modifier + K to get next link for example). I am very unlikely to loop through all the buttons on a page to look for navigation.
3. Accessibility - If I encounter a link I expect the page to change (even via AJAX). If I encounter a button I expect it to perform an action on the current page. Expected behaviour is a key part of accessibility.
4. Accessibility - hyperlinks have some important states. 'visited' is a key one on pages with lots of links as I may want to review something I read earlier and being able to navigate via visited links (e.g. NVDA modifier + K for all unvisited links). Buttons do not expose this information. An important point here is that you also can't style a button with button:visited in your CSS so you miss out on the visual clue for everybody there.
5. Accessibility - Space key vs the Enter key. If I land on a link I am expecting to press space to navigate, a <button> only works with the Enter key and so I may be confused as to why the page isn't changing. (I am assuming at this point you have used a load of aria to convince me this button is a hyperlink).
6. Robustness - If your site has limited functionality when JavaScript fails a hyperlink is far better than a button. It will still work when JavaScript fails and this is especially useful when a JavaScript failure may only be a temporary load problem with one page, allowing a user to get to another functioning page.
7. SEO - I dare to speak of SEO on Stack Overflow? Shame! Shame! Shame! :-P - but seriously although Google is pretty darned smart in what it can do on JS powered sites it does still struggle to work out where a JavaScript only link will take it. If SEO matters for you then use a hyperlink with a valid destination so Google can map information correctly.

我可能忘记提及的其他原因，但我想我已经指出了.

Probably other reasons I have forgotten to mention but I think I have made the point.

尽管不是您的问题的一部分，但我想我会迅速补充几点以保持完整性.

Although not part of your question I thought I would quickly add a couple of points for completeness.

如果您使用的是SPA模式，则需要向用户发送信号，表明页面正在加载(从而中断了正常导航).例如我单击了您的链接，您需要让我知道在您使用e.preventDefault()或同等功能拦截正常的浏览器行为时，正在执行一项操作(正在加载...).

You need to signal to a user that a page is loading if you are using a SPA pattern (and therefore interrupting normal navigation). e.g. I click your link you need to let me know that an action is being performed (loading.....) as you intercept the normal browser behaviour with e.preventDefault() or equivalent.

最简单的方法是使用 aria-live=assertive 解释页面正在加载的区域.您可以Google如何正确实现它.

The simplest way is to use aria-live=assertive on a region that explains the page is loading. You can Google how to implement that correctly.

另外，在加载新页面时，您需要管理焦点.

Additionally when the new page loads you need to manage focus.

执行此操作的最佳方法是在每个具有tabindex="-1"的页面上添加一个1级标题(<h1>).

The best way to do this is to add a level 1 heading (<h1>) to each page that has tabindex="-1".

页面加载完后，您在JavaScript导航功能中执行的最后一项操作就是将焦点放在此标题上.

Once the page loads the last action you perform in your JavaScript navigation function is to place the focus onto this heading.

这有两个好处:

1. 它可以让用户知道他们现在的位置
2. 它还让他们知道页面加载的完成时间(因为在大多数屏幕阅读器中加载页面时AAAX导航不会宣布).

使用tabindex="-1"表示该标题不会被JavaScript以外的其他任何对象聚焦，因此不会干扰正常的文档流程.

By using tabindex="-1" it means that the heading won't be focusable by anything other than your JavaScript so won't interfere with the normal document flow.

这篇关于React SPA中的锚点或按钮?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！