Zugriff auf dynamische Routenparameter mit dem useParams-Hook in React

useParams Hook in React

Der useParams-Hook ist Teil von React Router und wird verwendet, um über die aktuelle URL auf die dynamischen Parameter zuzugreifen. Dieser Hook ist vor allem dann nützlich, wenn Sie Routen mit dynamischen Segmenten haben, wie z. B. Benutzer-IDs, Produkt-IDs oder andere variable Daten, die in den Routenpfad eingebettet sind.

Wenn Sie beispielsweise einen Blog erstellen und einen bestimmten Beitrag anhand seiner ID anzeigen möchten, würden Sie useParams verwenden, um die Beitrags-ID von der URL abzurufen und den entsprechenden Beitrag anzuzeigen.

---

Wie useParams funktioniert

• useParams gibt ein Objekt zurück, das Schlüssel-Wert-Paare dynamischer Parameter aus der aktuellen Route enthält.
• Die Schlüssel im Objekt entsprechen den Namen der Routenparameter (angegeben im Routenpfad) und die Werte sind die tatsächlichen Werte aus der URL.

Syntax:

const params = useParams();

Rücksendungen:

• Ein Objekt mit Schlüssel-Wert-Paaren, wobei der Schlüssel der Name des Parameters und der Wert der Wert des Parameters aus der URL ist.

---

Beispiel 1: Grundlegende Verwendung von useParams

Angenommen, Sie haben eine Route zum Anzeigen eines Benutzerprofils, wobei die Route /profile/:userId lautet und :userId ein dynamisches Segment ist.

Schritt 1: Definieren Sie eine Route mit einem dynamischen Parameter

import React from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import UserProfile from './UserProfile';

const App = () => {
  return (
    <router>
      <routes>
        <route path="/profile/:userId" element="{<UserProfile"></route>} />
      </routes>
    </router>
  );
};

export default App;

Schritt 2: Verwenden Sie useParams, um die Benutzer-ID zu extrahieren

import React from 'react';
import { useParams } from 'react-router-dom';

const UserProfile = () => {
  const { userId } = useParams();  // Extracts the userId from the URL

  return (
    <div>
      <h2 id="User-Profile">User Profile</h2>
      <p>Displaying details for user with ID: {userId}</p>
    </div>
  );
};

export default UserProfile;

Erklärung:

• Wenn die URL /profile/123 lautet, gibt der useParams-Hook { userId: '123' } zurück.
• Die Benutzer-ID wird dann verwendet, um spezifische Informationen für diesen Benutzer in der UserProfile-Komponente anzuzeigen.

---

Beispiel 2: Verwendung mehrerer Parameter

Sie können mehrere dynamische Parameter in der Route haben und useParams gibt sie alle zurück.

Schritt 1: Definieren Sie eine Route mit mehreren dynamischen Parametern

import React from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import PostDetail from './PostDetail';

const App = () => {
  return (
    <router>
      <routes>
        <route path="/post/:postId/comment/:commentId" element="{<PostDetail"></route>} />
      </routes>
    </router>
  );
};

export default App;

Schritt 2: Verwenden Sie useParams, um mehrere Parameter zu extrahieren

import React from 'react';
import { useParams } from 'react-router-dom';

const PostDetail = () => {
  const { postId, commentId } = useParams(); // Extracts postId and commentId from the URL

  return (
    <div>
      <h2 id="Post-Details">Post Details</h2>
      <p>Post ID: {postId}</p>
      <p>Comment ID: {commentId}</p>
    </div>
  );
};

export default PostDetail;

Erklärung:

• Wenn die URL /post/456/comment/789 lautet, gibt der useParams-Hook { postId: '456', commentId: '789' } zurück.
• Die Komponente zeigt dann die Beitrags-ID und Kommentar-ID basierend auf den URL-Parametern an.

---

Beispiel 3: Verwendung von useParams mit optionalen Parametern

Sie können auch optionale Parameter verarbeiten, indem Sie eine Route mit einem Parameter definieren, der optional eingeschlossen werden kann.

Schritt 1: Definieren Sie eine Route mit optionalen Parametern

const params = useParams();

Schritt 2: Behandeln Sie den optionalen Parameter in useParams

import React from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import UserProfile from './UserProfile';

const App = () => {
  return (
    <router>
      <routes>
        <route path="/profile/:userId" element="{<UserProfile"></route>} />
      </routes>
    </router>
  );
};

export default App;

Erklärung:

• In diesem Fall ist der Abfrageparameter optional (gekennzeichnet durch das ? in der Route).
• Wenn die URL /search/books lautet, gibt useParams { query: 'books' } zurück.
• Wenn die URL /search lautet, gibt useParams {} zurück (d. h. keine Abfrage) und die Meldung „Alle Ergebnisse anzeigen“ wird angezeigt.

---

Wann sollte useParams verwendet werden?

• Dynamische Routen: Wenn Sie eine URL-Struktur haben, die dynamische Segmente enthält (z. B. /users/:userId, /products/:productId).
• Daten abrufen: Wenn Sie Daten basierend auf den dynamischen Werten in der URL abrufen müssen (z. B. das Profil eines Benutzers, Produktdetails oder einen Blog-Beitrag nach ID abrufen).
• Verschachtelte Routen: In Szenarien, in denen verschachtelte Routen dynamische Parameter haben und Sie Werte aus der URL extrahieren müssen.

---

Einschränkungen von useParams

• State Not Persisted: useParams ruft nur Parameter von der URL ab. Sie werden nach einer Routenänderung nicht gespeichert oder beibehalten. Wenn Sie den Überblick über die Parameter behalten müssen, müssen Sie möglicherweise die Statusverwaltung oder andere Hooks verwenden (z. B. useState, useEffect).
• Keine Abfrageparameter: Wenn Sie Abfrageparameter lesen müssen (z. B. ?sort=asc), verwenden Sie den useLocation-Hook anstelle von useParams.

---

Fazit

Der useParams-Hook ist eine einfache und effektive Möglichkeit, über die URL in Ihren React-Komponenten auf dynamische Parameter zuzugreifen. Es erleichtert die Arbeit mit dynamischen Routen erheblich und ermöglicht Ihnen die Erstellung flexiblerer und dynamischerer Anwendungen.

---

Das obige ist der detaillierte Inhalt vonZugriff auf dynamische Routenparameter mit dem useParams-Hook in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!