Cách cập nhật thông số truy vấn trong React

Tham số truy vấn là các cặp tên/giá trị mà bạn có thể thêm vào cuối URL. Chúng cho phép bạn lưu trữ dữ liệu trong URL đó.

Một ứng dụng thực tế của tham số truy vấn là lưu trữ các giá trị từ tìm kiếm của người dùng.

Sử dụng React Router để cập nhật tham số truy vấn

Khi người dùng nhập truy vấn vào thanh tìm kiếm, bạn nên lưu trữ truy vấn đó trong URL. Ví dụ: nếu người dùng tìm kiếm danh sách blog cho các bài đăng trong danh mục “phản ứng”, thì URL được cập nhật sẽ có dạng như sau: /posts?tag=reac.

React cung cấp hook useSearchParams giúp bạn đọc hoặc cập nhật chuỗi truy vấn.

Để bắt đầu, hãy tạo một thanh tìm kiếm trong 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>
  );
} 

Hãy nhớ làm theo các phương pháp hay nhất khi sử dụng React để tận dụng tối đa chúng.

Tiếp theo, cài đặt bộ định tuyến React và thêm định tuyến vào ứng dụng của bạn. Đây là điều bắt buộc để hook useSearchParams hoạt động.

 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="https://www.smartreviewaz.com/" element={<App />} />
      </Routes>
    </BrowserRouter>
  </React.StrictMode>
);
 

Giờ đây, bạn có thể lưu các truy vấn trong URL khi người dùng nhập bằng cách sửa đổi hàm handleChange().

 import { useState } from "react";
import { useSearchParams } from "react-router-dom";
export default function App() {
  const [query, setquery] = useState("");
  const [searchParams, setSearchParams] = useSearchParams({});
  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>
  );
}
 

Lấy các giá trị truy vấn từ URL

Bạn có thể nhận một giá trị truy vấn duy nhất bằng cách sử dụng searchParams.get() và chuyển vào tên của tham số truy vấn.

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

Để nhận tất cả các tham số truy vấn, hãy sử dụng searchParams.entries().

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

Phương thức này trả về một trình vòng lặp mà bạn có thể lặp lại bằng các cặp khóa/giá trị.

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

Các cặp khóa/giá trị theo thứ tự chúng xuất hiện trong URL.

Sử dụng tham số truy vấn để cải thiện khả năng chia sẻ kết quả tìm kiếm

Móc useSearchParams rất phù hợp để lưu trữ các giá trị tìm kiếm hoặc bất kỳ dữ liệu nào khác dưới dạng tham số truy vấn trong một URL.

Bạn cũng có thể theo dõi các giá trị tìm kiếm bằng hook useState, nhưng lưu trữ chúng trong tham số truy vấn có nghĩa là mọi người có thể chia sẻ chúng qua URL.