Das Hauptproblem im Zusammenhang mit den URL-Parametern des React Routers besteht darin, dass sie in dynamischen Routen möglicherweise schwierig zu verwenden sind. Dies liegt daran, dass die URL-Parameter statisch sind und nicht geändert werden können, nachdem die Route erstellt wurde. Das bedeutet, dass ein Benutzer, wenn er auf eine andere Seite mit anderen Parametern zugreifen muss, für jede Parameterkombination eine neue Route erstellen muss. Darüber hinaus kann es bei der Verwendung von URL-Parametern schwierig sein, alle möglichen Kombinationen im Auge zu behalten und sicherzustellen, dass jede einzelne vom Router ordnungsgemäß verarbeitet wird.
import {
BrowserRouter as Router,
Route,
Link,
useParams
} from "react-router-dom";
const App = () => {
return (
<Router>
<div>
<Route path="/user/:username" component={UserPage} />
</div>
</Router>
);
};
const UserPage = () => {
let { username } = useParams(); // Get the username from the URL.
return (
<div>Hello, {username}!</div> // Render a greeting with the username.
);
};
Dieser Code richtet einen React-Router ein, um eine Seite mit einem Benutzernamen aus der URL zu rendern.
1. Die erste Zeile importiert Komponenten aus der React Router DOM-Bibliothek.
2. Die App-Funktion gibt die Router-Komponente mit einer darin enthaltenen Route-Komponente zurück, die angibt, dass jede URL, die mit „/user/“ beginnt, die UserPage-Komponente rendern soll.
3. Die UserPage-Funktion verwendet useParams(), um den Benutzernamen aus der URL abzurufen, und rendert dann eine Begrüßung mit diesem Benutzernamen.
URL-Parameter
URL-Parameter in React Router sind Datenelemente, die als Teil der URL an eine Route übergeben werden. Sie ermöglichen Entwicklern, dynamische Informationen an eine Route zu übergeben, z. B. eine ID oder eine Abfragezeichenfolge. Dies kann verwendet werden, um dynamische Routen zu erstellen, die für Dinge wie das Anzeigen bestimmter Elemente aus einer Datenbank oder das Filtern von Inhalten basierend auf Benutzereingaben verwendet werden können. React Router bietet Tools für den Zugriff auf und die Bearbeitung von URL-Parametern, sodass Sie sie einfach in Ihrer Anwendung verwenden können.
Wie erhalten Sie die URL-Parameter von einer Route in React
In React Router können Sie mit dem Hook useParams von einer Route aus auf die URL-Parameter zugreifen. Dieser Hook gibt ein Objekt zurück, das Schlüssel-Wert-Paare der URL-Parameter enthält. Wenn Ihre Route beispielsweise /user/:id ist, können Sie mit useParams().id auf den id-Parameter zugreifen.
