Anker oder Button im React SPA?

Question 1

Angenommen, auf einer Seite befindet sich ein Textstück (unabhängig davon, ob es sich um einen “traditionellen” Link oder eine Schaltfläche handelt), das beim Klicken zu einer neuen Seite mit einer neuen Seite/URL führt. Aber die Navigation geschieht programmgesteuert (zB via react-router mit der Verlaufs-Web-API) anstelle einer harten HTTP-Aktualisierung.

In diesem Fall sollte es sich um einen traditionellen Ankerlink handeln href Attribut wie z # oder ein Knopf?

Option 1:

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

Der Nachteil ist, dass Sie einen Müll haben href Attribut. Sie könnten das entfernen, aber dann ist es nicht in der Tab-Reihenfolge und erhält kein Standard-Link-Styling (obwohl diese mit einem einmaligen Styling überwunden werden könnten). Auch wenn Sie den Link kopieren, wird er kopiert als # was falsch ist und von Screenreadern falsch interpretiert werden.

Option 2:

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

Der Nachteil hierbei ist, dass Sie ein benutzerdefiniertes Styling anwenden müssen, wenn Sie möchten, dass es wie ein herkömmlicher Link aussieht. In gewisser Weise verhält es sich meiner Meinung nach auch wirklich wie eine traditionelle Verbindung. Aber das wäre besser für Screenreader.

Question 2

Ich kann React nicht kommentieren, aber hier ist die richtige Methode für SPAs, die Implementierung sollte in React trivial sein.

Kurze Antwort

Verwenden Sie einen Hyperlink (<a>) zum Navigieren zwischen Seiten und beim Laden zusätzlicher Inhalte, wenn keine andere Option verfügbar ist.

Einfacher: Wenn sich die URL ändert oder Sie der Seite viele Informationen hinzufügen, verwenden Sie einen Hyperlink.

Lange Antwort

In Ihrer Frage erwähnten Sie die Verlaufs-API und react-router.

Aus diesem Grund gehe ich davon aus, dass die Funktion navigateToNextPage ändert die URL.

Ich gehe auch davon aus, dass ich auf diese Seite direkt zugreifen könnte, wenn ich es wünschte, indem ich diese URL in meinen Browser eingab.

Unter Berücksichtigung dieser Annahmen sollten Sie Folgendes verwenden:

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

Offensichtlich würden Sie die Standardaktion (e.preventDefault() oder Äquivalent reagieren).

Ein paar Punkte dazu warum um das oben beschriebene Format zu verwenden:-

Barrierefreiheit – Wenn ich mit einem Screenreader auf einen Hyperlink stoße, kann ich meinen Screenreader fragen, wohin mich dieser Link führen wird, das ist beruhigend, ich kann dasselbe nicht mit einer Schaltfläche tun. Aus diesem Grund habe ich es nicht verwendet # für den Hyperlink, sondern das eigentliche Ziel hinzugefügt. Wenn du siehst href="#" Es ist fast immer ein Zeichen dafür, dass das falsche Element verwendet wird oder dass es falsch verwendet wird. Nachdem Sie Ihre Kommentare zum Ausführen einer Aktion vor dem Navigieren gelesen haben, ist dies immer noch vollkommen gültig, führen Sie Ihre Aktion aus und leiten Sie dann um, es ist am Ende des Tages immer noch Navigation.
Barrierefreiheit – Wenn ich mit einem Screenreader auf einer Website navigiere, entscheide ich mich möglicherweise, alle Hyperlinks auf der Seite zu durchlaufen, um ein Gefühl für die Seitenstruktur zu bekommen. (NVDA-Modifikator + K um zum Beispiel den nächsten Link zu erhalten). Es ist sehr unwahrscheinlich, dass ich alle Schaltflächen auf einer Seite durchlaufe, um nach der Navigation zu suchen.

Barrierefreiheit – Wenn ich auf einen Link stoße, den ich erwarten von die zu wechselnde Seite (auch über AJAX). Wenn ich auf einen Knopf stoße, erwarte ich das eine Aktion auf der aktuellen Seite ausführen. Erwartetes Verhalten ist ein Schlüsselelement der Barrierefreiheit.
Barrierefreiheit – Hyperlinks haben einige wichtige Zustände. „Besucht“ ist ein Schlüsselfaktor auf Seiten mit vielen Links, da ich vielleicht etwas, das ich zuvor gelesen habe, noch einmal überprüfen möchte und in der Lage bin, über besuchte Links zu navigieren (z NVDA-Modifikator + K für alle nicht besuchten Links). Schaltflächen stellen diese Informationen nicht bereit. Ein wichtiger Punkt hierbei ist, dass man damit auch keinen Button stylen kann button:visited in Ihrem CSS, damit Sie den visuellen Hinweis für alle dort verpassen.
Barrierefreiheit – Platz Schlüssel vs Eintreten Schlüssel. Wenn ich auf einem Link lande, erwarte ich zu drücken space navigieren, a <button> funktioniert nur mit Eintreten Schlüssel und so kann ich verwirrt sein, warum sich die Seite nicht ändert. (Ich gehe an dieser Stelle davon aus, dass Sie eine Menge davon verwendet haben aria um mich davon zu überzeugen, dass diese Schaltfläche ein Hyperlink ist).

Robustheit – Wenn Ihre Website über eine eingeschränkte Funktionalität verfügt Wenn JavaScript schlägt fehl, ein Hyperlink ist viel besser als eine Schaltfläche. Es wird immer noch funktionieren Wenn JavaScript schlägt fehl und das ist besonders nützlich Wenn Ein JavaScript-Fehler ist möglicherweise nur ein vorübergehendes Ladeproblem mit einer Seite, sodass ein Benutzer zu einer anderen funktionierenden Seite gelangen kann.
SEO – Ich wage es, bei Stack Overflow von SEO zu sprechen? Schande! Schande! Schande! 😛 – aber im Ernst, obwohl Google verdammt schlau ist, was es auf JS-basierten Websites tun kann, hat es immer noch Schwierigkeiten, herauszufinden, wohin ein reiner JavaScript-Link führt. Wenn SEO für Sie wichtig ist, verwenden Sie einen Hyperlink mit einem gültigen Ziel, damit Google Informationen korrekt zuordnen kann.

Wahrscheinlich andere Gründe, die ich vergessen habe zu erwähnen, aber ich denke, ich habe es auf den Punkt gebracht.

Was müssen Sie beachten, wenn Sie AJAX verwenden, um zwischen den Seiten zu navigieren?

Obwohl nicht Teil Ihrer Frage, dachte ich, ich würde der Vollständigkeit halber schnell ein paar Punkte hinzufügen.

Sie müssen einem Benutzer signalisieren, dass eine Seite geladen wird, wenn Sie ein SPA-Muster verwenden (und daher die normale Navigation unterbrechen). Wenn ich zB auf Ihren Link klicke, müssen Sie mich wissen lassen, dass eine Aktion ausgeführt wird (Laden…..), da Sie das normale Browserverhalten abfangen e.preventDefault() oder gleichwertig.

Der einfachste Weg ist die Verwendung aria-live=assertive in einem Bereich, der erklärt, dass die Seite geladen wird. Sie können googeln, wie Sie das richtig implementieren.

Außerdem müssen Sie beim Laden der neuen Seite den Fokus verwalten.

Dazu fügen Sie am besten eine Überschrift der Ebene 1 hinzu (<h1>) zu jeder Seite, die hat tabindex="-1".

Sobald die Seite geladen ist, besteht die letzte Aktion, die Sie in Ihrer JavaScript-Navigationsfunktion ausführen, darin, den Fokus auf diese Überschrift zu legen.

Dies hat zwei Vorteile:

es lässt den Benutzer wissen, wo er sich gerade befindet
Es teilt ihnen auch mit, wann das Laden der Seite abgeschlossen ist (da die AJAX-Navigation in den meisten Screenreadern nicht ankündigt, wann die Seite geladen wird).

Durch die Nutzung tabindex="-1" Das bedeutet, dass die Überschrift nur mit JavaScript fokussierbar ist und den normalen Dokumentenfluss nicht stört.

Question 3

Du kannst einfach tun e.preventDefault() wenn angeklickt <NavLink> mach dein Ding. Dann navigieren. NavLink erzeugt <a> in HTML taggen und bereitstellen active Klasse standardmäßig, wenn Route aktiv ist. Auf diese Weise können Sie den aktiven Statuslink gestalten.

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="https://stackoverflow.com/" 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);

Arbeitsbeispiel: https://codesandbox.io/s/react-router-5-rqzqq

Question 4

Ich würde Ihnen empfehlen, semantisches HTML zu verwenden. Das bedeutet, so viel wie möglich die richtigen HTML-Elemente für ihren beabsichtigten Zweck zu verwenden.

Einfacher zu entwickeln – Sie können einige Funktionen kostenlos erhalten, und es ist wohl einfacher zu verstehen.

Besser auf Mobilgeräten – semantisches HTML hat wohl eine geringere Dateigröße als nicht-semantischer Spaghetti-Code und ist einfacher reaktionsfähig zu machen.

Gut für SEO – Suchmaschinen messen Schlüsselwörtern in Überschriften, Links usw. mehr Bedeutung bei als Schlüsselwörtern in nicht-semantischen s usw., sodass Ihre Dokumente für Kunden besser auffindbar sind.

Es gibt mehr Details