Next.js中实现带位置筛选的房产搜索及页面跳转功能

1. 首页搜索表单处理 #

在首页的搜索组件中，收集用户选中的房产类型与位置，点击搜索时通过useRouter跳转到对应类型的页面，并将位置作为查询参数传递：

import { useRouter } from 'next/router';
import { useState } from 'react';

export default function HomeSearch() {
  const router = useRouter();
  const [selectedType, setSelectedType] = useState('');
  const [selectedLocation, setSelectedLocation] = useState('');

  const handleSearch = () => {
    if (!selectedType || !selectedLocation) return;

    // 跳转到对应房产类型页面，携带location查询参数
    router.push({
      pathname: `/${selectedType.toLowerCase()}`, // 例如选中Land则跳转到/land
      query: { location: selectedLocation }
    });
  };

  return (
    <div className="search-form">
      <select 
        value={selectedType} 
        onChange={(e) => setSelectedType(e.target.value)}
      >
        <option value="">选择房产类型</option>
        <option value="Land">土地</option>
        <option value="Apartment">公寓</option>
        {/* 其他房产类型选项 */}
      </select>
      
      <select 
        value={selectedLocation} 
        onChange={(e) => setSelectedLocation(e.target.value)}
      >
        <option value="">选择位置</option>
        <option value="India">印度</option>
        <option value="USA">美国</option>
        {/* 其他位置选项 */}
      </select>

      <button onClick={handleSearch}>搜索</button>
    </div>
  );
}

2. 目标房产列表页接收参数并筛选数据 #

以Land列表页为例，通过useRouter获取查询参数中的location，再根据参数筛选房源：

场景1：前端本地筛选（数据已全量加载） #

import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';

// 模拟全量土地房源数据
const allLandProperties = [
  { id: 1, location: 'India', title: '印度德里商业用地' },
  { id: 2, location: 'USA', title: '美国加州住宅用地' },
  { id: 3, location: 'India', title: '印度孟买工业用地' },
];

export default function LandList() {
  const router = useRouter();
  const [filteredProperties, setFilteredProperties] = useState([]);

  useEffect(() => {
    const { location } = router.query;
    if (location) {
      // 根据location筛选数据
      const filtered = allLandProperties.filter(prop => prop.location === location);
      setFilteredProperties(filtered);
    } else {
      // 无筛选条件时展示全部数据
      setFilteredProperties(allLandProperties);
    }
  }, [router.query]);

  return (
    <div className="property-list">
      {filteredProperties.map(prop => (
        <div key={prop.id} className="property-item">
          <h3>{prop.title}</h3>
          <p>位置：{prop.location}</p>
        </div>
      ))}
    </div>
  );
}

场景2：后端接口带参数请求（数据从后端获取） #

如果房源数据来自后端接口，直接将location参数拼入请求URL，让后端返回筛选后的结果：

import { useRouter } from 'next/router';
import { useEffect, useState } from 'react';

export default function LandList() {
  const router = useRouter();
  const [properties, setProperties] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchProperties = async () => {
      const { location } = router.query;
      // 携带location参数请求后端接口
      const res = await fetch(`/api/land-properties?location=${location || ''}`);
      const data = await res.json();
      setProperties(data);
      setLoading(false);
    };

    fetchProperties();
  }, [router.query]);

  if (loading) return <div>加载中...</div>;

  return (
    <div className="property-list">
      {properties.map(prop => (
        <div key={prop.id} className="property-item">
          <h3>{prop.title}</h3>
          <p>位置：{prop.location}</p>
        </div>
      ))}
    </div>
  );
}

3. 额外优化点 #

• 可对location参数做大小写统一处理（比如转成小写），避免因大小写不匹配导致筛选失败
• 如果使用React Router而非Next.js，可替换为useNavigate跳转、useSearchParams获取参数，逻辑完全一致
• 若用户在列表页手动修改URL参数，useEffect会监听参数变化自动重新筛选，确保页面内容与参数同步

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