نحوه به روز رسانی پارامترهای کوئری در React

با استفاده از پارامترهای پرس و جو، یک برنامه کاربرپسند ایجاد کنید.

پارامترهای پرس و جو جفت نام/مقدار هستند که می توانید به انتهای URL اضافه کنید. آنها به شما اجازه می دهند داده ها را در آن URL ذخیره کنید.

یکی از کاربردهای عملی پارامترهای پرس و جو، ذخیره مقادیر جستجوی کاربر است.

استفاده از React Router برای به روز رسانی پارامترهای Query

هنگامی که کاربر درخواستی را در نوار جستجو وارد می کند، باید آن پرس و جو را در URL ذخیره کنید. برای مثال، اگر کاربری فهرستی از وبلاگ‌ها را برای پست‌هایی در دسته «react» جستجو کند، URL به‌روزرسانی شده باید به این شکل باشد: /posts?tag=react.

React قلاب useSearchParams را ارائه می‌کند که به شما کمک می‌کند رشته‌های پرس و جو را بخوانید یا به‌روزرسانی کنید.

برای شروع، یک نوار جستجو در App.js ایجاد کنید.

import { useState } from "react";
export default function App() {
  const [query, setquery] = useState('')
  const handleChange = (e) => {
    setquery(e.target.value)
  };
  return (
    <div>
      <form role="search">
        <input onChange={handleChange} value={query} type="search" />
      </form>
    </div>
  );
}

به یاد داشته باشید که هنگام استفاده از React از بهترین شیوه ها پیروی کنید تا بیشترین بهره را از آنها ببرید.

سپس روتر React را نصب کرده و مسیریابی را به برنامه خود اضافه کنید. این برای کارکردن قلاب useSearchParams ضروری است.

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import { BrowserRouter, Route, Routes } from "react-router-dom";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<App />} />
      </Routes>
    </BrowserRouter>
  </React.StrictMode>
);


اکنون می توانید با تغییر تابع handleChange() کوئری ها را در URL ذخیره کنید.

import { useState } from "react";
import { useSearchParams } from "react-router-dom";

  const handleChange = (e) => {
    setSearchParams({ query: e.target.value });
    setquery(e.target.value);
  };
  return (
    <div>
      <form role="search">
        <input onChange={handleChange} value={query} type="search" />
      </form>
    </div>
  );
}


دریافت مقادیر پرس و جو از URL

می‌توانید با استفاده از searchParams.get() و ارسال نام پارامتر query یک مقدار query دریافت کنید.

const [searchParams, setSearchParams] = useSearchParams({});
const value = searchParams.get('tag')


برای دریافت تمام پارامترهای پرس و جو، از searchParams.entries() استفاده کنید.

const [searchParams, setSearchParams] = useSearchParams({});
const values = searchParams.entries()


این روش یک تکرارکننده را برمی‌گرداند که می‌توانید با استفاده از جفت‌های کلید/مقدار آن را تکرار کنید.

for (const [key, value] of values) {
    console.log(`${key}, ${value}`);
}


جفت‌های کلید/مقدار به ترتیبی هستند که در URL ظاهر می‌شوند.

از پارامترهای Query برای بهبود اشتراک گذاری نتایج جستجو استفاده کنید

قلاب useSearchParams برای ذخیره مقادیر جستجو یا هر داده دیگری به عنوان پارامترهای جستجو در URL عالی است.

همچنین می‌توانید مقادیر جستجو را با قلاب useState پیگیری کنید، اما ذخیره آن‌ها در یک پارامتر query به این معنی است که افراد می‌توانند آنها را از طریق URL به اشتراک بگذارند.

منبع مقاله