React Router: programmatische Navigation ohne Schmerz und Verzögerung

Navigation in React: nicht nur ein Klick auf einen Link

Haben Sie sich jemals gefragt, wie Sie React Router dazu bringen, nicht durch einen Benutzerklick, sondern durch einen Befehl aus dem Code zu einer anderen Seite zu navigieren? Zum Beispiel nach erfolgreichem Absenden eines Formulars, nach der Authentifizierung oder einfach nach 5 Sekunden? Wenn ja, sind Sie hier genau richtig. Die Frage "How can I programmatically navigate using React Router?" ist eine der beliebtesten auf Stack Overflow, und das aus gutem Grund. Es scheint einfach, aber in der Praxis verbergen sich viele Fallstricke, besonders wenn es um die Leistung geht.

In diesem Artikel zeigen wir nicht nur, wie man useNavigate verwendet. Wir analysieren, wie man es richtig, schnell und ohne Verzögerungen macht. Sie erfahren, welche Muster zu Speicherlecks führen und welche zu blitzschneller Navigation. Los geht's!

Der Klassiker: useNavigate – Ihr wichtigstes Werkzeug

Seit React Router v6 hat useNavigate den guten alten useHistory ersetzt. Dies ist ein Hook, der die Funktion navigate zurückgibt. Das sieht so aus:

import { useNavigate } from 'react-router-dom';\n\nfunction LoginButton() {\n  const navigate = useNavigate();\n\n  const handleLogin = () => {\n    // Hier die Anmeldelogik\n    const user = { name: 'Ivan' };\n    // Nach Erfolg – Weiterleitung\n    navigate('/dashboard', { replace: true });\n  };\n\n  return <button onClick={handleLogin}>Anmelden</button>;\n}\n

Beachten Sie den Parameter { replace: true }. Er ersetzt den aktuellen Eintrag im Verlauf, anstatt einen neuen hinzuzufügen. Dies ist für die Anmeldung entscheidend, damit der Benutzer nicht zurück zur Anmeldeseite gelangt.

Wohin kann man navigieren?

\n
• Absoluter Pfad: navigate('/about')
\n
• Relativer Pfad: navigate('../settings')
\n
• Zurück/Vor im Verlauf: navigate(-1) oder navigate(2)
\n

Fortgeschrittene Ebene: Navigation außerhalb von Komponenten

Was aber, wenn Sie eine Weiterleitung aus einer normalen Funktion heraus durchführen müssen, die nicht innerhalb einer React-Komponente liegt? Zum Beispiel aus einem action creator in Redux oder aus einem axios-Interceptor? Der Hook useNavigate funktioniert hier nicht – Hooks werden nur innerhalb von funktionalen Komponenten aufgerufen.

Lösung: Erstellen Sie eine benutzerdefinierte Wrapper-Komponente oder verwenden Sie ein globales Router-Objekt. In React Router v6 gibt es dafür die speziellen Komponenten RouterProvider und createBrowserRouter, aber es gibt auch einen einfacheren Weg – speichern Sie einen Verweis auf navigate in einer Variablen.

// router.js\nimport { createBrowserRouter, RouterProvider } from 'react-router-dom';\n\nexport const router = createBrowserRouter([...]);\n\n// navigation.js – separates Modul für die Navigation\nlet navigateFunction = null;\n\nexport const setNavigate = (navigate) => {\n  navigateFunction = navigate;\n};\n\nexport const navigateTo = (path) => {\n  if (navigateFunction) {\n    navigateFunction(path);\n  } else {\n    console.warn('Navigation ist noch nicht bereit');\n  }\n};\n\n// App.js\nimport { useNavigate } from 'react-router-dom';\nimport { setNavigate } from './navigation';\nimport { useEffect } from 'react';\n\nfunction App() {\n  const navigate = useNavigate();\n\n  useEffect(() => {\n    setNavigate(navigate);\n  }, [navigate]);\n\n  return /* Ihr Code */;\n}\n

Jetzt können Sie aus jeder Funktion (sei es aus setTimeout oder aus fetch) navigateTo('/home') aufrufen. Praktisch? Ja. Sicher? Nur, wenn Sie nicht vergessen, den Verweis beim Aushängen der Komponente zu bereinigen.

Leistungsoptimierung: Warum Ihre Anwendung langsamer wird?

Programmatische Navigation ist nicht nur ein Funktionsaufruf. Es ist ein Auslöser für ein vollständiges Neu-Rendering der Seite. Und wenn Sie dies tun