Το κύριο πρόβλημα που σχετίζεται με τις παραμέτρους URL του δρομολογητή React είναι ότι μπορεί να είναι δύσκολο να χρησιμοποιηθούν σε δυναμικές διαδρομές. Αυτό συμβαίνει επειδή οι παράμετροι URL είναι στατικές και δεν μπορούν να αλλάξουν μετά τη δημιουργία της διαδρομής. Αυτό σημαίνει ότι εάν ένας χρήστης χρειάζεται να αποκτήσει πρόσβαση σε διαφορετική σελίδα με διαφορετικές παραμέτρους, θα πρέπει να δημιουργήσει μια νέα διαδρομή για κάθε συνδυασμό παραμέτρων. Επιπλέον, όταν χρησιμοποιείτε παραμέτρους URL, μπορεί να είναι δύσκολο να παρακολουθείτε όλους τους πιθανούς συνδυασμούς και να βεβαιωθείτε ότι ο δρομολογητής χειρίζεται σωστά τον καθένα.
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.
);
};
Αυτός ο κώδικας ρυθμίζει έναν δρομολογητή React για απόδοση μιας σελίδας με όνομα χρήστη από τη διεύθυνση URL.
1. Η πρώτη γραμμή εισάγει στοιχεία από τη βιβλιοθήκη DOM του React Router.
2. Η συνάρτηση App επιστρέφει το στοιχείο Router με ένα στοιχείο Route μέσα σε αυτό, το οποίο καθορίζει ότι οποιαδήποτε διεύθυνση URL αρχίζει με "/user/" θα πρέπει να αποδίδει το στοιχείο UserPage.
3. Η συνάρτηση UserPage χρησιμοποιεί useParams() για να πάρει το όνομα χρήστη από τη διεύθυνση URL και στη συνέχεια αποδίδει έναν χαιρετισμό χρησιμοποιώντας αυτό το όνομα χρήστη.
Παράμετροι URL
Οι παράμετροι URL στο React Router είναι κομμάτια δεδομένων που μεταβιβάζονται σε μια διαδρομή ως μέρος της διεύθυνσης URL. Επιτρέπουν στους προγραμματιστές να μεταβιβάζουν δυναμικές πληροφορίες σε μια διαδρομή, όπως ένα αναγνωριστικό ή μια συμβολοσειρά ερωτήματος. Αυτό μπορεί να χρησιμοποιηθεί για τη δημιουργία δυναμικών διαδρομών που μπορούν να χρησιμοποιηθούν για πράγματα όπως η εμφάνιση συγκεκριμένων στοιχείων από μια βάση δεδομένων ή το φιλτράρισμα περιεχομένου με βάση τα δεδομένα χρήστη. Το React Router παρέχει εργαλεία για πρόσβαση και χειρισμό παραμέτρων URL, καθιστώντας εύκολη τη χρήση τους στην εφαρμογή σας.
Πώς λαμβάνετε τις παραμέτρους URL από μια διαδρομή στο React
Στο React Router, μπορείτε να αποκτήσετε πρόσβαση στις παραμέτρους URL από μια διαδρομή χρησιμοποιώντας το άγκιστρο useParams. Αυτό το άγκιστρο επιστρέφει ένα αντικείμενο που περιέχει ζεύγη κλειδιού-τιμής των παραμέτρων URL. Για παράδειγμα, εάν η διαδρομή σας είναι /user/:id, μπορείτε να αποκτήσετε πρόσβαση στην παράμετρο id με useParams().id.
