צור אפליקציה ידידותית למשתמש על ידי ניצול פרמטרי שאילתה.
פרמטרי שאילתה הם צמדי שם/ערך שתוכל להוסיף לסוף כתובת אתר. הם מאפשרים לך לאחסן נתונים באותה כתובת URL.
יישום מעשי אחד של פרמטרי שאילתה הוא אחסון ערכים מחיפוש של משתמש.
שימוש בנתב React לעדכון פרמטרי שאילתה
כאשר משתמש מזין שאילתה בסרגל חיפוש, עליך לאחסן את השאילתה בכתובת האתר. לדוגמה, אם משתמש חיפש ברשימת בלוגים אחר פוסטים בקטגוריית "להגיב", כתובת האתר המעודכנת צריכה להיראות כך: /posts? תג=תגובה.
React מספק את ה-useSearchParams הook שעוזר לך לקרוא או לעדכן מחרוזות שאילתות.
כדי להתחיל, צור סרגל חיפוש ב-App.js.
יְבוּא { useState } מ"לְהָגִיב";
יְצוּאבְּרִירַת מֶחדָלפוּנקצִיָהאפליקציה() {
const [שאילתה, setquery] = useState('')
const handleChange = (ה) => {
setquery(ה.יַעַד.ערך)
};
לַחֲזוֹר (
<div>
<טופסתַפְקִיד="לחפש">
<קֶלֶטבשינוי={handleChange}ערך={שאילתא}סוּג="לחפש" />
טופס>
div>
);
}זכור לעקוב שיטות עבודה מומלצות בעת שימוש ב-React כדי להפיק מהם את המקסימום.
לאחר מכן, התקן את נתב React והוסף ניתוב לאפליקציה שלך. זה הכרחי כדי שה-useSearchParams יפעל.
יְבוּא לְהָגִיב מ"לְהָגִיב";
יְבוּא ReactDOM מ"react-dom/client";
יְבוּא"./index.css";
יְבוּא אפליקציה מ"./אפליקציה";
יְבוּא { BrowserRouter, Route, Routes } מ"react-router-dom";
const root = ReactDOM.createRoot(מסמך.getElementById("שורש"));
שורש.לְדַקלֵם(
<לְהָגִיב. StrictMode>
<נתב דפדפן>
<מסלולים>"/" element={} />
מסלולים>
נתב דפדפן>
לְהָגִיב. StrictMode>
);
כעת תוכל לשמור את השאילתות בכתובת ה-URL כפי שהמשתמש מקליד על ידי שינוי הפונקציה handleChange() .
יְבוּא { useState } מ"לְהָגִיב";
יְבוּא { useSearchParams } מ"react-router-dom";יְצוּאבְּרִירַת מֶחדָלפוּנקצִיָהאפליקציה() {
const [שאילתה, setquery] = useState("");
const [searchParams, setSearchParams] = useSearchParams({});
const handleChange = (ה) => {
setSearchParams({ שאילתא: e.target.value });
setquery(ה.יַעַד.ערך);
};
לַחֲזוֹר (
<div>
<טופסתַפְקִיד="לחפש">
<קֶלֶטבשינוי={handleChange}ערך={שאילתא}סוּג="לחפש" />
טופס>
div>
);
}
קבלת ערכי השאילתה מכתובת האתר
אתה יכול לקבל ערך שאילתה בודד באמצעות searchParams.get() והעברת שם פרמטר השאילתה.
const [searchParams, setSearchParams] = useSearchParams({});
const value = searchParams.get('תָג')
כדי לקבל את כל פרמטרי השאילתה, השתמש ב-searchParams.entries().
const [searchParams, setSearchParams] = useSearchParams({});
const values = searchParams.entries()
שיטה זו מחזירה איטרטור שתוכל לבצע איטרציה באמצעות צמדי מפתח/ערך.
ל (const [ערך מפתח] שֶׁל ערכים) {
לְנַחֵם.עֵץ(`${key}, ${value}`);
}
צמדי המפתח/ערך נמצאים בסדר שהם מופיעים בכתובת האתר.
השתמש בפרמטרי שאילתה כדי לשפר את יכולת השיתוף של תוצאות חיפוש
ה-useSearchParams הוק מצוין לאחסון ערכי חיפוש או כל מידע אחר כפרמטרי שאילתה בכתובת URL.
אתה יכול גם לעקוב אחר ערכי חיפוש עם ה-useState hook, אבל אחסון אותם בפרמטר שאילתה אומר שאנשים יכולים לשתף אותם באמצעות כתובת האתר.
