Beherrschen der Navigation in React mit dem useNavigate Hook

Navigate Hook in React verwenden

Der useNavigate-Hook ist Teil von React Router (v6 und höher) und wird verwendet, um programmgesteuert zwischen verschiedenen Routen in Ihrer Anwendung zu navigieren. Im Gegensatz zur herkömmlichen Navigation (z. B. Klicken auf Links) können Sie mit dem useNavigate-Hook dynamisch auf der Grundlage von Benutzeraktionen wie Formularübermittlungen, Schaltflächenklicks oder Statusänderungen navigieren.

Dieser Hook ersetzt den älteren useHistory-Hook von React Router v5 und erleichtert die Handhabung der Navigation innerhalb funktionaler Komponenten.

---

So funktioniert useNavigate

Der useNavigate-Hook gibt eine Funktion zurück, mit der programmgesteuert zu einer bestimmten Route navigiert werden kann. Sie können dieser Funktion einen Pfad oder ein Standortobjekt übergeben und sie führt die Navigation entsprechend aus.

Syntax:

const navigate = useNavigate();

Parameter:

• Pfad (Zeichenfolge): Der Pfad, zu dem navigiert werden soll (z. B. „/home“, „/profile/:id“).
• Optionen (optional, Objekt):
  • ersetzen: Ein boolescher Wert, der bestimmt, ob die Navigation den aktuellen Verlaufseintrag ersetzen soll (Standard ist falsch).
  • state: Ein optionaler Status, den Sie an die neue Route übergeben können. Dies kann nützlich sein, um Informationen zur Zielroute weiterzugeben.

Allgemeine Verwendung:

• Navigieren Sie zu einer anderen Route.
• Ersetzen Sie den aktuellen Verlaufseintrag (keine Zurück-Aktion).
• Übergeben Sie zusätzlichen Status an die Zielroute.

---

Beispiel: Einfache Navigation mit useNavigate

Hier ist ein einfaches Beispiel dafür, wie Sie den useNavigate-Hook verwenden können, um programmgesteuert zu navigieren, wenn ein Benutzer auf eine Schaltfläche klickt.

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

const Home = () => {
  const navigate = useNavigate();

  const goToProfile = () => {
    // Navigate to the profile page
    navigate('/profile');
  };

  return (
    <div>
      <h2>Home Page</h2>
      <button onClick={goToProfile}>Go to Profile</button>
    </div>
  );
};

export default Home;

Erklärung:

• Der useNavigate-Hook wird verwendet, um die Navigationsfunktion abzurufen.
• Wenn auf die Schaltfläche geklickt wird, wird die Funktion „goToProfile“ aufgerufen, die „navigate('/profile‘)“ verwendet, um programmgesteuert zur Route /profile zu navigieren.

---

Beispiel: Navigieren mit dynamischen Parametern

Sie können useNavigate auch verwenden, um zu dynamischen Routen zu navigieren, bei denen Sie Parameter übergeben.

const navigate = useNavigate();

Erklärung:

• Navigation(/user/${userId}) generiert dynamisch eine URL basierend auf dem userId-Parameter.
• Durch Klicken auf die Schaltfläche für Benutzer 1 oder Benutzer 2 navigieren Sie zu /user/1 oder /user/2.

---

Beispiel: Verlaufseintrag durch Ersetzungsoption ersetzen

Beim Navigieren können Sie die Option „Ersetzen“ verwenden, um den aktuellen Eintrag im Verlaufsstapel zu ersetzen, anstatt einen neuen zu verschieben. Das bedeutet, dass der Benutzer nicht zur vorherigen Route zurückkehrt, wenn er auf die Schaltfläche „Zurück“ des Browsers klickt.

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

const Home = () => {
  const navigate = useNavigate();

  const goToProfile = () => {
    // Navigate to the profile page
    navigate('/profile');
  };

  return (
    <div>
      <h2>Home Page</h2>
      <button onClick={goToProfile}>Go to Profile</button>
    </div>
  );
};

export default Home;

Erklärung:

• Navigieren('/thank-you', { replace: true }) navigiert zur Route /thank-you und ersetzt den aktuellen Eintrag im Verlaufsstapel, was bedeutet, dass der Benutzer nicht mit zur Formularübermittlungsseite zurückkehren kann den „Zurück“-Button.

---

Beispiel: Passieren eines Staates mit Navigation

Mit der Navigation können Sie zusätzliche Status übergeben, die dann über useLocation.
an der Zielroute abgerufen werden können

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

const UserList = () => {
  const navigate = useNavigate();

  const goToUserProfile = (userId) => {
    // Navigate to the profile of a specific user by ID
    navigate(`/user/${userId}`);
  };

  return (
    <div>
      <h2>User List</h2>
      <button onClick={() => goToUserProfile(1)}>Go to User 1's Profile</button>
      <button onClick={() => goToUserProfile(2)}>Go to User 2's Profile</button>
    </div>
  );
};

export default UserList;

Auf der Route /settings können Sie wie folgt auf den bestandenen Status zugreifen:

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

const SubmitForm = () => {
  const navigate = useNavigate();

  const handleSubmit = () => {
    // Perform form submission logic
    // Then navigate to a "Thank You" page, replacing the current entry in history
    navigate('/thank-you', { replace: true });
  };

  return (
    <div>
      <h2>Submit Form</h2>
      <button onClick={handleSubmit}>Submit</button>
    </div>
  );
};

export default SubmitForm;

Erklärung:

• Navigation('/settings', { state: { userId: 123, userName: 'John Doe' } }) übergibt ein Objekt als Status.
• In der /settings-Komponente verwenden wir useLocation, um auf den übergebenen Status zuzugreifen, der userId und userName enthält.

---

Häufige Anwendungsfälle für useNavigate

1. Weiterleitung nach dem Absenden des Formulars:
   Nach dem Absenden eines Formulars (z. B. Benutzerregistrierung) können Sie den Benutzer zu einer Erfolgs- oder Anmeldeseite weiterleiten.

2. Bedingte Navigation:
   Basierend auf Benutzeraktionen oder -bedingungen (wie Authentifizierung) können Sie dynamisch zu verschiedenen Routen navigieren.

3. Programmatisches Routing:
   Sie können programmgesteuert auf der Grundlage benutzerdefinierter Logik navigieren, z. B. wenn eine Aktion abgeschlossen oder ein Ereignis ausgelöst wird.

4. Navigation nach erfolgreichem API-Aufruf:
   Nach einem erfolgreichen API-Aufruf (z. B. Anmelden) können Sie Benutzer zu ihrer Profilseite oder ihrem Dashboard weiterleiten.

---

Fazit

Der useNavigate-Hook in React Router ist ein leistungsstarkes Tool zur Handhabung der programmgesteuerten Navigation in Funktionskomponenten. Es ermöglicht Ihnen, basierend auf Benutzeraktionen oder Anwendungsstatus dynamisch zu verschiedenen Routen zu navigieren. Mit Optionen wie Ersetzen und der Möglichkeit, den Status zu übergeben, bietet useNavigate Flexibilität für die Steuerung des Navigationsverhaltens in React-Anwendungen.

---

Das obige ist der detaillierte Inhalt vonBeherrschen der Navigation in React mit dem useNavigate Hook. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!