如何向React应用传递URL参数？实现车辆厂商过滤功能

完全理解你的需求——通过URL哈希参数实现厂商过滤，同时让React应用自动响应参数变化重渲染列表对吧？我给你梳理一套完整的实现步骤，用React Hooks来做，适配你的场景：

1. 核心思路拆解 #

• 监听URL哈希的变化，实时解析出过滤参数
• 将参数存入组件状态，状态变化自动触发组件重渲染
• 依赖过滤参数重新请求API，更新车辆列表

2. 具体代码实现 #

第一步：编写哈希参数解析工具函数 #

先写个小工具，把哈希字符串转成键值对对象，方便后续使用：

const parseHashParams = () => {
  const hash = window.location.hash.slice(1); // 去掉开头的#
  if (!hash) return {};
  return hash.split('&').reduce((params, pair) => {
    const [key, value] = pair.split('=');
    params[key] = decodeURIComponent(value);
    return params;
  }, {});
};

第二步：组件内实现状态管理与哈希监听 #

在你的车辆列表组件里，用useState存过滤参数和车辆数据，用useEffect监听哈希变化和参数变化：

import { useState, useEffect } from 'react';

const CarList = () => {
  const [cars, setCars] = useState([]);
  const [filterParams, setFilterParams] = useState({});

  // 初始化：页面加载时解析当前哈希参数
  useEffect(() => {
    const initialParams = parseHashParams();
    setFilterParams(initialParams);
  }, []);

  // 监听哈希变化，更新过滤参数
  useEffect(() => {
    const handleHashChange = () => {
      const newParams = parseHashParams();
      setFilterParams(newParams);
    };
    window.addEventListener('hashchange', handleHashChange);
    // 清理监听，防止内存泄漏
    return () => window.removeEventListener('hashchange', handleHashChange);
  }, []);

  // 过滤参数变化时，重新请求API
  useEffect(() => {
    const fetchCars = async () => {
      // 构建API请求参数，把filterParams转成查询字符串
      const queryString = new URLSearchParams(filterParams).toString();
      const response = await fetch(`/api/cars?${queryString}`); // 替换成你的实际API地址
      const data = await response.json();
      setCars(data);
    };

    fetchCars();
  }, [filterParams]);

  // 渲染车辆列表
  return (
    <div>
      {/* 可选：添加过滤控件，修改哈希同步参数 */}
      <div className="filters">
        <select
          value={filterParams.manufacturer || ''}
          onChange={(e) => {
            const newManufacturer = e.target.value;
            // 更新哈希参数
            const newParams = { ...filterParams, manufacturer: newManufacturer };
            const newHash = new URLSearchParams(newParams).toString();
            window.location.hash = newHash;
          }}
        >
          <option value="">全部厂商</option>
          <option value="mercedes">Mercedes</option>
          <option value="audi">Audi</option>
          {/* 其他厂商选项按需添加 */}
        </select>
      </div>

      <ul>
        {cars.map((car) => (
          <li key={car.id}>{`${car.manufacturer} ${car.model}`}</li>
        ))}
      </ul>
    </div>
  );
};

export default CarList;

3. 关键细节说明 #

• 哈希参数解析：用decodeURIComponent处理特殊字符，避免参数值出现乱码
• 状态与哈希同步：当用户通过下拉框修改过滤条件时，直接更新URL哈希，哈希变化会触发状态更新，进而触发API请求——这样既保证了URL和应用状态一致，又支持用户手动修改哈希刷新页面
• 空参数处理：当没有哈希参数时，filterParams是空对象，API会返回全部车辆，符合预期
• 监听清理：在useEffect的返回函数中移除事件监听，防止组件卸载后残留监听导致内存泄漏

这套方案完全利用React的状态驱动特性，参数变化自动触发重渲染和数据更新，完美适配你的需求～

内容的提问来源于stack exchange，提问作者rhodes