使用 URLSearchParams 反应路由器 - Javascript

URLSearchParams 是一个 JavaScript API，可用于在 URL 中解析查询字符串参数。该 API 可用于直接操作浏览器的 URL 对象，从而轻松获取并处理 URL 查询参数。

在 React 应用中，我们可以使用 URLSearchParams 解析 URL 查询参数，并根据查询参数进行相应的操作，例如根据查询参数显示不同的页面内容、筛选数据等。

如何使用 URLSearchParams

URLSearchParams 可以使用自带的构造函数来创建一个新实例，然后使用 get() 方法获取指定的查询参数值，例如：

const params = new URLSearchParams(window.location.search);

const id = params.get('id');
console.log(id);

在上面的示例中，我们首先创建了一个 URLSearchParams 实例，用于解析当前 URL 的查询参数。然后，我们使用该实例的 get() 方法检索 id 参数的值，并将其记录在控制台中。

URLSearchParams 还提供了一些其他有用的方法，例如 getAll()、append() 和 delete()，您可以在官方文档中了解更多信息。

示例应用

假设我们有一个简单的 React 应用，该应用展示公司的产品列表，并允许用户筛选列表中的产品。我们可以使用 URLSearchParams 来在用户进行筛选时更改 URL 并更新页面。

首先，让我们创建一个带有产品列表和筛选选项的组件：

import React, { useState, useEffect } from 'react';

const PRODUCTS = [
  { id: 1, name: 'Product 1', price: 10 },
  { id: 2, name: 'Product 2', price: 20 },
  { id: 3, name: 'Product 3', price: 30 },
  { id: 4, name: 'Product 4', price: 40 },
];

function ProductList() {
  const [filteredProducts, setFilteredProducts] = useState(PRODUCTS);
  const [minPrice, setMinPrice] = useState('');
  const [maxPrice, setMaxPrice] = useState('');

  useEffect(() => {
    // 使用 URLSearchParams 解析 URL 查询参数，并根据价格筛选产品
    const params = new URLSearchParams(window.location.search);

    const min = params.get('min');
    const max = params.get('max');

    if (min || max) {
      const filtered = PRODUCTS.filter((product) => {
        const price = parseFloat(product.price);

        if (min && price < parseFloat(min)) {
          return false;
        }

        if (max && price > parseFloat(max)) {
          return false;
        }

        return true;
      });

      setFilteredProducts(filtered);
    } else {
      setFilteredProducts(PRODUCTS);
    }
  }, [minPrice, maxPrice]);

  function handleFilter() {
    // 使用 URLSearchParams 更新 URL，并重新加载页面
    const params = new URLSearchParams();

    if (minPrice) {
      params.append('min', minPrice);
    }

    if (maxPrice) {
      params.append('max', maxPrice);
    }

    window.location.href = `${window.location.pathname}?${params.toString()}`;
  }

  return (
    <div>
      <h1>Product List</h1>

      <div style={{ marginBottom: '1rem' }}>
        <label htmlFor="min-price">Min Price:</label>
        <input
          type="text"
          id="min-price"
          value={minPrice}
          onChange={(e) => setMinPrice(e.target.value)}
        />
      </div>

      <div style={{ marginBottom: '1rem' }}>
        <label htmlFor="max-price">Max Price:</label>
        <input
          type="text"
          id="max-price"
          value={maxPrice}
          onChange={(e) => setMaxPrice(e.target.value)}
        />
      </div>

      <button onClick={handleFilter}>Filter</button>

      <ul>
        {filteredProducts.map((product) => (
          <li key={product.id}>
            {product.name} - ${product.price}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default ProductList;

在上面的示例中，我们使用 URLSearchParams 解析 URL 查询参数，并根据查询参数筛选产品，并在更新 URL 的同时使用 useEffect() 钩子来重新加载页面。我们还创建了两个输入来允许用户设置价格范围，并使用 URLSearchParams 更新 URL 来触发筛选操作。

结论

URLSearchParams 是一个非常有用的 JavaScript API，可用于处理 URL 查询参数。在 React 应用中，我们可以使用 URLSearchParams 来动态更新 URL 并更新页面，以响应用户的交互。