Якорь или Кнопка в React SPA?

Question

Допустим, на странице есть фрагмент текста (независимо от того, стилизован ли он как «традиционная» ссылка или кнопка), при нажатии которого открывается новая страница с новой страницей / URL. Но навигация происходит программно (например, через react-router с использованием веб-API истории) вместо жесткого HTTP refre sh.

В этом случае это должна быть традиционная якорная ссылка с атрибутом href, например как # или кнопка?

Опция 1 :

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

Недостатком является наличие атрибута барахла href. Вы могли бы удалить это, но тогда это не в порядке табуляции и не получает стили ссылок по умолчанию (хотя это может быть преодолено с помощью одноразовых стилей). Также, если вы скопируете ссылку, она будет скопирована как #, что неверно и неправильно интерпретируется программами чтения с экрана.

Опция 2 :

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

Недостатки здесь, если вы хотите, чтобы это выглядело как традиционная ссылка, вам нужно применить пользовательский стиль. Кроме того, в некотором смысле это действительно действует как традиционная ссылка на мой взгляд. Но это было бы лучше для программ чтения с экрана.

Answer 1

Я не могу комментировать React, но вот правильный метод для SPA, его реализация должна быть тривиальной в React.

Краткий ответ

Использовать гиперссылку (<a>) для переходить между страницами и при загрузке дополнительного содержимого, если нет других доступных вариантов.

Проще говоря: если URL-адрес изменяется или вы добавляете на страницу большое количество информации, используйте гиперссылку.

Длинный ответ

В своем вопросе вы упомянули API истории. и react-router.

По этой причине я предполагаю, что функция navigateToNextPage меняет URL.

Я также предполагаю, что я мог бы получить доступ к этой странице напрямую, если бы захотел, введя этот URL в свой браузер.

Учитывая все эти предположения, вы должны использовать: -

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

Очевидно, что вы остановите действие по умолчанию (e.preventDefault() или эквивалентный React).

Пара моментов на , почему использует формат, описанный выше: -

1. Доступность - когда я сталкиваюсь с гиперссылкой с помощью программы чтения с экрана, я могу спросить у программы чтения с экрана, куда приведет меня эта ссылка, это обнадеживает, я не могу сделать то же самое с кнопкой. Вот почему я не использовал # для гиперссылки, а вместо этого добавил фактическое назначение. Если вы видите href="#", это почти всегда признак того, что используется неправильный элемент или он используется неправильно. После прочтения ваших комментариев о выполнении действия перед навигацией, оно все еще остается в силе, выполните свое действие и затем перенаправьте, оно все еще остается в конце дня.
2. Доступность - когда я перемещаюсь по сайту с помощью программы чтения с экрана, я могу решить просмотреть все гиперссылки на странице, чтобы почувствовать структуру страницы. ( Модификатор NVDA + K , чтобы получить следующую ссылку, например). Я очень маловероятно, чтобы l oop просматривал все кнопки на странице для поиска навигации.
3. Доступность - Если я столкнусь со ссылкой, я ожидаю страницу изменить (даже через AJAX). Если я сталкиваюсь с кнопкой, я ожидаю, что она выполнит действие на текущей странице . Ожидаемое поведение является ключевой частью доступности.
4. Доступность - гиперссылки имеют несколько важных состояний. «посещенный» является ключевым на страницах с большим количеством ссылок, так как я могу захотеть просмотреть что-то, что я прочитал ранее, и иметь возможность перемещаться по посещенным ссылкам (например, модификатор NVDA + K для все не посещенные ссылки). Кнопки не раскрывают эту информацию. Важным моментом здесь является то, что вы также не можете оформить кнопку с button:visited в вашем CSS, поэтому вы упускаете визуальную подсказку для всех присутствующих.
5. Доступность - Пробел клавиша против клавиши Enter . Если я попаду по ссылке, которую я ожидаю нажать space для навигации, <button> будет работать только с клавишей Enter , и поэтому я могу быть смущен тем, почему страница не меняется. (Я предполагаю, что в этот момент вы использовали загрузку aria, чтобы убедить меня, что эта кнопка является гиперссылкой).
6. Надежность - Если ваш сайт имеет ограниченную функциональность , когда JavaScript терпит неудачу, гиперссылка гораздо лучше, чем кнопка. Он все равно будет работать при сбое JavaScript, и это особенно полезно , когда сбой a JavaScript может быть только временной проблемой загрузки одной страницы, позволяя пользователю перейти на другую функционирующая страница.
7. SEO - Я смею говорить о SEO по переполнению стека? Позор! Позор! Позор! :-P - но серьезно, хотя Google чертовски умён в том, что он может делать на сайтах, работающих на JS, он все еще пытается понять, где его получит только ссылка JavaScript. Если для вас важен SEO, тогда используйте гиперссылку с правильным адресом, чтобы Google мог правильно отобразить информацию.

Возможно, я упомянул другие причины, но думаю, что сделал это правильно.

Что следует учитывать при использовании AJAX для навигации по страницам?

Хотя это и не часть вашего вопроса, я подумал, что я бы быстро добавил пару пунктов для полноты.

Вам нужно сообщить пользователю, что страница загружается, если вы используете шаблон SPA (и, следовательно, прерывая нормальную навигацию). например, я нажимаю на вашу ссылку, и вы должны сообщить мне, что выполняется действие (загрузка .....), когда вы перехватываете нормальное поведение браузера с помощью e.preventDefault() или эквивалентного.

Самый простой способ - это используйте aria-live=assertive для региона, который объясняет загрузку страницы. Вы можете Google, как реализовать это правильно.

Кроме того, когда новая страница загружается, вам нужно управлять фокусом.

Лучший способ сделать это - добавить заголовок 1-го уровня (<h1>) на каждую страницу с tabindex="-1".

Как только страница загружается, последним действием, которое вы выполняете в своей JavaScript навигационной функции, является установка фокуса на этот заголовок.

У этого есть два преимущества:

1. это позволяет пользователю узнать, где они сейчас находятся
2. и также сообщает, когда загрузка страницы завершена (как * 1134) * навигация не сообщает, когда страница загружается в большинстве программ чтения с экрана).

Использование tabindex="-1" означает, что заголовок не будет фокусироваться ничем, кроме вашего JavaScript, поэтому не будет мешать нормальному потоку документов.

Answer 2

Вы можете просто сделать e.preventDefault(), когда нажмете на <NavLink> сделать свое дело. Затем перейдите. NavLink создает тег <a> в HTML и предоставляет класс active по умолчанию, когда маршрут активен. Это позволяет стилизовать ссылку активного состояния.

import React from "react";
import { NavLink, withRouter } from "react-router-dom";

function Header(props) {
  const handleClick = e => {
    e.preventDefault();
    console.log("DO SOMETHING");
    props.history.push(e.target.pathname);
  };
  return (
    <ul>
      <li>
        <NavLink exact to="/" onClick={handleClick}>
          Home
        </NavLink>
      </li>
      <li>
        <NavLink to="/about" onClick={handleClick}>
          About
        </NavLink>
      </li>
      <li>
        <NavLink to="/topics" onClick={handleClick}>
          NavLink
        </NavLink>
      </li>
    </ul>
  );
}

export const HeaderNav = withRouter(Header);

Пример работы: https://codesandbox.io/s/react-router-5-rqzqq

Answer 3

Я бы порекомендовал вам использовать semanti c HTML. Это означает максимально возможное использование правильных HTML элементов по их прямому назначению.

1. Легче разрабатывать с помощью - вы можете получить некоторые функциональные возможности бесплатно, плюс, возможно, легче понять .
2. Лучше на мобильных устройствах - semanti c HTML, возможно, меньше по размеру файла, чем не-semanti c код спагетти, и его легче адаптировать.
3. Хорошо для SEO - Поисковые системы придают большее значение ключевым словам внутри заголовков, ссылок и т. д. c., чем ключевым словам, включенным в несемантические теги и т. д. c., поэтому ваши документы будут более доступными для клиентов.

Там подробнее