HashRouter-Komponente in React

React ist eine Bibliothek, mit der Sie moderne, schnelle Anwendungen mit eleganter Benutzeroberfläche erstellen können. Routing ist eines der wesentlichen Merkmale jeder benutzerorientierten Anwendung.

In React verwenden wir eine react-router-Bibliothek, damit Benutzer durch die Implementierung der Routing-Funktionen in unserer App navigieren können.

die <HashRouter>-Komponente in React

<HashRouter> ist ein Untertyp der <Router>-Komponente, die einen Hash-Wert (verfügbar auf window.location.hash) verwendet, um die Benutzeroberfläche der Anwendung basierend auf Änderungen an der URL zu aktualisieren. Die Komponente erhält ihren Namen, weil sie ein Hash-Symbol verwendet. Alles, was diesem Symbol folgt, wird in der Serveranfrage ignoriert.

Da es einen Hash-Wert verwendet, um Komponenten bedingt zu rendern, unterstützt <HashRouter> alte und neue Browser. Das clientseitige Routing mit <HashRouter> ist vom serverseitigen Routing entkoppelt.

Wenn die Serveranforderung beispielsweise www.muster.com/#/kategorie/home lautet, lautet die letzte vom Server empfangene Anforderung www.muster.com, und das serverseitige Routing rendert die Seite für www.muster.com, nicht die gesamte URL, einschliesslich der Teile nach dem Rautenzeichen.

Stattdessen können Sie die Komponente <HashRouter> verwenden, um die Benutzeroberfläche basierend auf der URL nach dem Hash-Symbol zu ändern. Dies geschieht auf der Client-Seite.

Um mehr darüber zu erfahren, wann Sie den <HashRouter> im Vergleich zum <BrowserRouter> verwenden sollten, lesen Sie diesen Artikel.

Um besser zu verstehen, wie man die Komponente <HashRouter> in der Praxis verwendet, schauen wir uns dieses grundlegende Beispiel an:

import "./styles.css";
import { HashRouter, Link } from "react-router-dom";
export default function App() {
  return (
    <HashRouter basename="/">
      <div className="App">
        <h1>Hello CodeSandbox</h1>
        <h2>Start editing to see some magic happen!</h2>
        <Link to="/category1">hello</Link>
      </div>
    </HashRouter>
  );
}

Wir haben zwei benutzerdefinierte Komponenten aus der Bibliothek react-router-dom importiert: <HashRouter> und <Link>. Wir haben die gesamte Anwendung mit der benutzerdefinierten Komponente <HashRouter> umhüllt.

Wir haben dem Container eine <Link>-Komponente hinzugefügt, die den Benutzer von der aktuellen URL zum Pfad "/category1" führt.

Sehen Sie sich diese Live-Demo an, um zu sehen, wie es in der Praxis funktioniert.

Wie Sie sehen können, hat die Komponente <HashRouter> ein basename-Attribut, das einfach gleich "/" ist. Aus diesem Grund lautet die Homepage dieser App https://bweuok.csb.app/#/.

Durch Klicken auf den Link gelangen Sie zum Pfad https://bweuok.csb.app/#/category1.