Głównym problemem związanym z parametrami React Router URL jest to, że mogą być trudne w użyciu w trasach dynamicznych. Dzieje się tak, ponieważ parametry adresu URL są statyczne i nie można ich zmienić po utworzeniu trasy. Oznacza to, że jeśli użytkownik chce uzyskać dostęp do innej strony z innymi parametrami, będzie musiał utworzyć nową trasę dla każdej kombinacji parametrów. Ponadto podczas korzystania z parametrów adresów URL śledzenie wszystkich możliwych kombinacji i upewnienie się, że każda z nich jest prawidłowo obsługiwana przez router, może być trudne.
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.
);
};
Ten kod konfiguruje React Router do renderowania strony z nazwą użytkownika z adresu URL.
1. Pierwsza linia importuje komponenty z biblioteki React Router DOM.
2. Funkcja App zwraca komponent Router z zawartym w nim komponentem Route, który określa, że każdy adres URL rozpoczynający się od „/user/” powinien renderować komponent UserPage.
3. Funkcja UserPage używa metody useParams() do pobrania nazwy użytkownika z adresu URL, a następnie renderuje powitanie przy użyciu tej nazwy użytkownika.
Parametry adresu URL
Parametry adresu URL w React Router to fragmenty danych, które są przekazywane do trasy jako część adresu URL. Umożliwiają programistom przekazywanie dynamicznych informacji do trasy, takich jak identyfikator lub ciąg zapytania. Może to służyć do tworzenia dynamicznych tras, które mogą być używane do wyświetlania określonych elementów z bazy danych lub filtrowania treści na podstawie danych wprowadzonych przez użytkownika. React Router zapewnia narzędzia do uzyskiwania dostępu i manipulowania parametrami adresów URL, ułatwiając ich użycie w Twojej aplikacji.
Jak uzyskać parametry adresu URL z trasy w React
W React Router możesz uzyskać dostęp do parametrów adresu URL z trasy za pomocą haka useParams. Ten hak zwraca obiekt zawierający pary klucz-wartość parametrów adresu URL. Na przykład, jeśli twoja trasa to /user/:id, możesz uzyskać dostęp do parametru id za pomocą useParams().id.
