Δημιουργήστε μια φιλική προς το χρήστη εφαρμογή αξιοποιώντας τις παραμέτρους ερωτήματος.
Οι παράμετροι ερωτήματος είναι ζεύγη ονόματος/τιμής που μπορείτε να προσθέσετε στο τέλος μιας διεύθυνσης URL. Σας επιτρέπουν να αποθηκεύετε δεδομένα σε αυτό το URL.
Μια πρακτική εφαρμογή των παραμέτρων ερωτήματος είναι η αποθήκευση τιμών από την αναζήτηση ενός χρήστη.
Χρήση του δρομολογητή React για την ενημέρωση των παραμέτρων ερωτήματος
Όταν ένας χρήστης εισάγει ένα ερώτημα σε μια γραμμή αναζήτησης, θα πρέπει να αποθηκεύσετε αυτό το ερώτημα στη διεύθυνση URL. Για παράδειγμα, εάν ένας χρήστης έκανε αναζήτηση σε μια λίστα ιστολογίων για δημοσιεύσεις στην κατηγορία "react", η ενημερωμένη διεύθυνση URL θα πρέπει να μοιάζει με αυτό: /posts? tag=αντίδραση.
Το React παρέχει το άγκιστρο useSearchParams που σας βοηθά να διαβάζετε ή να ενημερώνετε τις συμβολοσειρές ερωτημάτων.
Για να ξεκινήσετε, δημιουργήστε μια γραμμή αναζήτησης στο App.js.
εισαγωγή { useState } από"αντιδρώ";
εξαγωγήΠροκαθορισμένολειτουργίαApp() {
συνθ [query, setquery] = useState('')
συνθ λαβήΑλλαγή = (μι) => {
ερωτηματολόγιο(μι.στόχος.αξία)
};
ΕΠΙΣΤΡΟΦΗ (
<div>
<μορφήρόλος="Αναζήτηση">
<εισαγωγήonChange={handleChange}αξία={ερώτηση}τύπος="Αναζήτηση" />
μορφή>
div>
);
}Θυμηθείτε να ακολουθήσετε βέλτιστες πρακτικές κατά τη χρήση του React για να αξιοποιήσετε στο έπακρο αυτά.
Στη συνέχεια, εγκαταστήστε το δρομολογητή React και προσθέστε δρομολόγηση στην εφαρμογή σας. Αυτό είναι απαραίτητο για να λειτουργήσει το άγκιστρο useSearchParams.
εισαγωγή Αντιδρώ από"αντιδρώ";
εισαγωγή ReactDOM από"react-dom/client";
εισαγωγή"./index.css";
εισαγωγή App από"./Εφαρμογή";
εισαγωγή { BrowserRouter, Route, Routes } από"react-router-dom";
συνθ root = ReactDOM.createRoot(έγγραφο.getElementById("ρίζα"));
ρίζα.καθιστώ(
<Αντιδρώ. StrictMode>
<BrowserRouter>
<Διαδρομές>"/" στοιχείο ={} />
Διαδρομές>
BrowserRouter>
Αντιδρώ. StrictMode>
);
Τώρα μπορείτε να αποθηκεύσετε τα ερωτήματα στη διεύθυνση URL καθώς πληκτρολογεί ο χρήστης τροποποιώντας τη συνάρτηση handleChange().
εισαγωγή { useState } από"αντιδρώ";
εισαγωγή { useSearchParams } από"react-router-dom";εξαγωγήΠροκαθορισμένολειτουργίαApp() {
συνθ [query, setquery] = useState("");
συνθ [searchParams, setSearchParams] = useSearchParams({});
συνθ λαβήΑλλαγή = (μι) => {
setSearchParams({ ερώτηση: e.target.value });
ερωτηματολόγιο(μι.στόχος.αξία);
};
ΕΠΙΣΤΡΟΦΗ (
<div>
<μορφήρόλος="Αναζήτηση">
<εισαγωγήonChange={handleChange}αξία={ερώτηση}τύπος="Αναζήτηση" />
μορφή>
div>
);
}
Λήψη των τιμών ερωτήματος από τη διεύθυνση URL
Μπορείτε να λάβετε μια ενιαία τιμή ερωτήματος χρησιμοποιώντας το searchParams.get() και μεταβιβάζοντας το όνομα της παραμέτρου ερωτήματος.
συνθ [searchParams, setSearchParams] = useSearchParams({});
συνθ value = searchParams.get('ετικέτα')
Για να λάβετε όλες τις παραμέτρους του ερωτήματος, χρησιμοποιήστε το searchParams.entries().
συνθ [searchParams, setSearchParams] = useSearchParams({});
συνθ values = searchParams.entries()
Αυτή η μέθοδος επιστρέφει έναν επαναλήπτη που μπορείτε να επαναλάβετε χρησιμοποιώντας ζεύγη κλειδιών/τιμών.
Για (συνθ [κλειδί, τιμή] του αξίες) {
κονσόλα.κούτσουρο(`${κλειδί}, ${value}`);
}
Τα ζεύγη κλειδιών/τιμών είναι με τη σειρά που εμφανίζονται στη διεύθυνση URL.
Χρησιμοποιήστε παραμέτρους ερωτήματος για να βελτιώσετε τη δυνατότητα κοινής χρήσης των αποτελεσμάτων αναζήτησης
Το άγκιστρο useSearchParams είναι εξαιρετικό για την αποθήκευση τιμών αναζήτησης ή οποιωνδήποτε άλλων δεδομένων ως παραμέτρων ερωτήματος σε μια διεύθυνση URL.
Μπορείτε επίσης να παρακολουθείτε τις τιμές αναζήτησης με το άγκιστρο useState, αλλά η αποθήκευση τους σε μια παράμετρο ερωτήματος σημαίνει ότι οι χρήστες μπορούν να τις μοιραστούν μέσω της διεύθυνσης URL.
