React-Routing

von

Hooks:

useParams():

  • ermöglicht den Zugriff alle URL-Parameter in einer Route
  • liefert ein Objekt, dessen Keys den Parametern in der Route entsprechen
    (keys müssen exakt wie URL-Parameter benannt sein)
  • values der keys sind immer strings
  • kombinierbar mit useNavigate() und useLocation()
  • Grundlage für Fetching von API-Daten anhand von Parametern
import { useParams } from "react-router-dom";

function User() {
  const params = useParams();
  return <div>User ID: {params.id}</div>;
}

...
<Route path="/user/:id" element={<User />} />
...
// URL /user/42 -> prams.id===="42"


function Comment() {
  const { postId, commentId } = useParams();
  return <div>Post: {postId}, Comment: {commentId}</div>;
}

...
<Route path="/post/:postId/comment/:commentId" element={<Comment />} />
...
// URL /post/10/comment/5 → { postId: "10", commentId: "5" }

useNavigate():

  • ermöglicht programmatische Navigation innerhalb einer React-App
  • ersetzt klassische Redirects oder window.location in SPAs

Anwendung:

  • nach Formular-Submit weiterleiten
  • dynamische Navigation basierend auf Bedingung (if(userLoggedIn))
  • Kombination mit useParams für Detail-Seiten

Tipps:

  • immer innerhalb von BrowserRouter verwenden
  • nutze navigate(-1) oder navigate(1) für „Back/Forward“
  • kann zusammen mit useEffect genutzt werden, z. B. Redirect nach Login
import { useNavigate } from "react-router-dom";

function Navbar() {
  const navigate = useNavigate();

  return (
    <button onClick={() => navigate("/about")}>
      Go to About
    </button>
  );
}

// zusätzliche Navigations-Optionen angeben?
navigate("/path", {
  replace: false, // true ersetzt den aktuellen Eintrag im History-Stack
  state: { from: "home" } // beliebige Daten an Ziel-Route übergeben
});