MERN栈（React+Express）房产应用URL参数过滤实现求助

后端（Express + Mongoose） #

核心逻辑：解析URL查询参数，动态构建Mongoose过滤条件，返回匹配数据。

// routes/apartments.js
const express = require('express');
const router = express.Router();
const Apartment = require('../models/Apartment'); // 模型需包含price、area、buildingType字段

router.get('/', async (req, res) => {
  try {
    const filter = {};

    // 价格过滤：支持精确匹配或范围查询
    if (req.query.price) {
      filter.price = parseInt(req.query.price);
    }
    if (req.query.minPrice && req.query.maxPrice) {
      filter.price = {
        $gte: parseInt(req.query.minPrice),
        $lte: parseInt(req.query.maxPrice)
      };
    }

    // 区域过滤：精确匹配，如需模糊查询可改用$regex
    if (req.query.area) {
      filter.area = req.query.area;
    }

    // 建筑类型过滤
    if (req.query.type) {
      filter.buildingType = req.query.type;
    }

    const apartments = await Apartment.find(filter);
    res.json(apartments);
  } catch (err) {
    res.status(500).json({ message: '查询失败：' + err.message });
  }
});

module.exports = router;

前端（React + React Router） #

核心逻辑：同步URL参数与组件状态，监听参数变化自动请求数据，用户操作时更新URL参数。

import { useState, useEffect } from 'react';
import { useSearchParams } from 'react-router-dom';

const ApartmentsList = () => {
  const [apartments, setApartments] = useState([]);
  const [searchParams, setSearchParams] = useSearchParams();

  // 初始化过滤状态，与URL参数同步
  const [filters, setFilters] = useState({
    price: searchParams.get('price') || '',
    area: searchParams.get('area') || '',
    type: searchParams.get('type') || ''
  });

  // URL参数或过滤状态变化时，重新请求数据
  useEffect(() => {
    const fetchData = async () => {
      const queryStr = new URLSearchParams(filters).toString();
      const res = await fetch(`/api/apartments?${queryStr}`);
      const data = await res.json();
      setApartments(data);
    };
    fetchData();
  }, [filters]);

  // 处理过滤条件变更，同步到URL和组件状态
  const handleFilterChange = (e) => {
    const { name, value } = e.target;
    const newFilters = { ...filters, [name]: value };
    setFilters(newFilters);
    setSearchParams(newFilters);
  };

  return (
    <div>
      {/* 过滤表单 */}
      <div className="filter-bar">
        <input
          type="number"
          name="price"
          value={filters.price}
          onChange={handleFilterChange}
          placeholder="精确价格"
        />
        <input
          type="text"
          name="area"
          value={filters.area}
          onChange={handleFilterChange}
          placeholder="区域"
        />
        <select name="type" value={filters.type} onChange={handleFilterChange}>
          <option value="">全部类型</option>
          <option value="apartment">公寓</option>
          <option value="villa">别墅</option>
          <option value="townhouse">联排</option>
        </select>
      </div>

      {/* 公寓列表展示 */}
      <div className="apartment-grid">
        {apartments.map(apt => (
          <div key={apt._id} className="apartment-card">
            <h3>{apt.title}</h3>
            <p>¥{apt.price}/月</p>
            <p>区域：{apt.area}</p>
            <p>类型：{apt.buildingType}</p>
          </div>
        ))}
      </div>
    </div>
  );
};

export default ApartmentsList;

关键注意点 #

• 后端需做好类型转换，避免字符串类型参数传入Mongoose数字字段导致查询失败
• 前端使用useSearchParams保证URL参数与组件状态双向同步，解决手动修改URL无响应的问题
• 可根据需求扩展过滤逻辑，比如价格范围、区域模糊匹配等

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