Reagieren Sie auf dynamische Router-Routen

1. Reagieren Sie auf dynamische Router-Routen
2. Benutzerdefinierte Komponenten des React-Routers
3. Beispiel für dynamische Router-Routen reagieren

React ist eine der, wenn nicht sogar die beliebteste Bibliothek zum Erstellen von Webanwendungen. Allerdings wissen nicht viele Leute, dass React nur eine Bibliothek ist, die sich mit dem Rendern von Benutzeroberflächen befasst.

Es hat keine integrierten Lösungen für das Routing wie Angular. Aus diesem Grund müssen React-Entwickler externe Bibliotheken verwenden, um Routing-Funktionen in React zu implementieren.

Die meisten Entwickler verwenden react-router, um Navigations- und Routing-Funktionen in React zu implementieren.

Reagieren Sie auf dynamische Router-Routen

Wenn Sie eine Webanwendung mit mehr als einer Seite erstellen, müssen Sie Routen definieren, bei denen es sich um Muster für URLs handelt.

Sie können beispielsweise react-router verwenden, um anzugeben, dass React Ihre Home-Komponente anzeigen soll, wenn die URL www.mywebsite.com/ lautet.

Etwas komplizierter wird es, wenn Ihre Bewerbung viele gleichartige Seiten hat. Wenn Sie beispielsweise ein Blog besuchen, ist es üblich, dass jeder Beitrag seinen Titel in der URL hat, wie folgt:

Wenn Sie Tausende von Beiträgen oder Produkten haben, können Sie nicht manuell Routen für jeden einzelnen definieren. Glücklicherweise können Sie mit React Router auf einfache Weise dynamische Routen erstellen, die automatisch eine URL für ein bestimmtes Element generieren.

Dieser Artikel zeigt, wie man eine solche Funktionalität in React-Apps erreicht.

Benutzerdefinierte Komponenten des React-Routers

Beginnen wir zunächst mit vier benutzerdefinierten Komponenten, die Sie importieren werden. Dies sind die am häufigsten verwendeten benutzerdefinierten Komponenten aus der react-router-Bibliothek.

Der <BrowserRouter> ist die Hauptkomponente, die die Navigation zwischen den Seiten übernimmt. Es funktioniert mit dem Browser, um die richtige Seite für jede URL anzuzeigen.

Der <BrowserRouter> muss die gesamte Anwendung umschließen. Sie können nur andere benutzerdefinierte Komponenten zwischen den öffnenden und schließenden Tags dieses Wrappers verwenden.

Lesen Sie offizielle Dokumentation, um mehr zu erfahren.

Wir verwenden die Komponenten <Routes> und ihre untergeordneten Komponenten <Route>, um anzugeben, was basierend auf der aktuellen URL (Standort) gerendert werden muss. Erfahren Sie mehr hier.

Schließlich ist die Komponente <Link> eine modifizierte Version des HTML-Elements <a>. Es bietet einen reibungsloseren Übergang von einer Seite zur anderen.

Wenn Benutzer auf eine <Link>-URL klicken, wird die React-App nicht neu geladen. Es bringt Benutzer sofort zum Ziel.

Erfahren Sie hier mehr über die Komponente <Link>.

Beispiel für dynamische Router-Routen reagieren

Betrachten wir ein praktisches Beispiel einer Bewerbung mit drei Stellen.

import "./styles.css";
import { BrowserRouter, Routes, Link, Route } from "react-router-dom";
import { useParams } from "react-router-dom";

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="posts/:title" element={<Post />} />
        <Route path="/" element={<Home />} />
      </Routes>
    </BrowserRouter>
  );
}

function Home() {
  var posts = [
    { title: "Guide to React" },
    { title: "Guide to Vue" },
    { title: "Guide to Angular" }
  ];
  return (
    <div className="App">
      Hello
      {posts.map((post) => (
        <>
          <br />
          <Link to={"posts/" + post.title}>{post.title}</Link>
          <br />
        </>
      ))}
    </div>
  );
}

function Post() {
  const urlParameters = useParams();
  return <h1>{urlParameters.title}</h1>;
}

Sie können mit dem Code auf CodeSandbox spielen.

Zuerst importieren wir vier benutzerdefinierte Komponenten - <BrowserRouter>, <Routes>, <Route>, <Link>. Wir importieren auch den Hook useParams, den wir später erklären werden.

Wir haben eine Hauptkomponente, App, die <Route>-Komponenten enthält, um Pfade mit Komponenten abzubilden.

Die erste Instanz der Komponente <Route> ist ziemlich einfach. Es weist React an, die Komponente <Home> zu rendern, wenn sich der Besucher auf der Seite '/' ('website.com/') befindet.

Die zweite Instanz der Komponente <Route> ist anders. Sein path-Attribut ist gleich der "posts/:title"-Zeichenfolge.

Das bedeutet, dass die Komponente <Post> angezeigt wird, wenn die URL mit "posts/:title" übereinstimmt. Das Semikolon : bedeutet, dass der Titel-Teil der URL dynamisch generiert werden kann.

Wenn der Beitrag den Titel 'Guide to React' hat, lautet die URL 'website.com/posts/Guide To React'.

Die dynamische URL generieren wir in der Komponente Home. Wir haben eine Reihe von drei Posts, von denen jeder einen einzigartigen Titel hat.

Wir verwenden die JavaScript-Methode .map(), um benutzerdefinierte <Link>-Komponenten zu generieren, die eindeutige Links für jeden Beitrag erstellen.

Der wichtigste Teil ist das Attribut to der benutzerdefinierten Komponente <Link>. Lass uns genauer hinschauen.

<Link to={"posts/" + post.title}>{post.title}</Link>

Wir verketten zwei Zeichenfolgen: "posts" und den Wert post.title, der für jeden Beitrag eindeutig ist. Als Ergebnis enthält jede URL den Titel des Beitrags in der URL.

Greifen Sie über die URL auf Werte zu

Jede <Route>-Komponente gibt den URL-Pfad an und welche Komponente basierend auf der URL gerendert werden muss. Sobald die untergeordnete Komponente <Post> gerendert ist, können Sie den Hook useParams() verwenden, um auf die Variable :title von der URL zuzugreifen.

function Post() {
  const urlParameters = useParams();
  return <h1>{urlParameters.title}</h1>;
}

Wir verwenden die Syntax {urlParameters.title}, um den Wert von URL-Parametern anzuzeigen. Jeder JavaScript-Ausdruck muss in geschweifte Klammern eingeschlossen werden.