本文详解如何使用 next.js 的 `router.push()` 正确构造形如 `/boarding-school/delhi-ncr?gender=male&somekey=value` 的动态 url，避免路径重复拼接问题，并通过对象式路由跳转安全注入查询参数。
在 Next.js（尤其是 App Router 或 Pages Router）中，动态路由与查询参数的组合跳转常因字符串拼接不当导致路径嵌套错误（如 /boarding-school/boarding-school/...）。根本原因在于：直接对 pathname 进行字符串拼接（如 `${selectedSchools}${pathname}`）会反复叠加当前路径，而非重置为全新路径。
正确做法是显式声明目标 pathname 并分离管理 query 参数，利用 router.push({ pathname, query }) 的对象语法——Next.js 会自动序列化并合并参数，确保 URL 清晰、可预测且符合语义。
✅ 推荐实现方式（Pages Router 示例）
import { useRouter } from "next/router";
import { useEffect, useState } from "react";
const Listing = () => {
const router = useRouter();
const { pathname, query } = router; // 可选：读取当前 query 做初始化
const [selectedSchools, setSelectedSchools] = useState("");
const [selectedGender, setSelectedGender] = useState("");
const [selectedBudget, setSelectedBudget] = useState("");
const [selectedBoard, setSelectedBoard] = useState("");
useEffect(() => {
// ✅ 步骤1：固定基础路径，动态插入参数值
const basePath = "/boarding-school";
const urlPath = selectedSchools
? `${basePath}/${encodeURIComponent(selectedSchools)}`
: basePath;
// ✅ 步骤2：构建结构化查询参数对象（自动处理编码）
const queryParams: Record<string, string> = {};
if (selectedGender) queryParams.gender = selectedGender;
if (selectedBudget) queryParams.budget = selectedBudget;
if (selectedBoard) queryParams.board = selectedBoard;
// 可继续添加其他参数，如：queryParams.somekey = "value";
// ✅ 步骤3：使用对象语法跳转 —— 安全、幂等、无路径污染
router.push({
pathname: urlPath,
query: queryParams,
});
}, [
selectedSchools,
selectedGender,
selectedBudget,
selectedBoard,
router
]);
// 示例：触发筛选的 UI 控件（如 Checkbox 或 Select）
const handleSchoolChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setSelectedSchools(e.target.value);
};
const handleGenderChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
setSelectedGender(e.target.value);
};
return (
<div>
<h2>学校筛选面板</h2>
<label>
学校地区：
<input
type="text"
value={selectedSchools}
onChange={handleSchoolChange}
placeholder="例如：delhi-ncr"
/>
</label>
<br />
<label>
性别筛选：
<select value={selectedGender} onChange={handleGenderChange}>
<option value="">全部</option>
<option value="male">男生</option>
<option value="female">女生</option>
</select>
</label>
{/* 其他筛选项... */}
</div>
);
};
export default Listing;⚠️ 关键注意事项
- 不要字符串拼接完整 URL：避免 router.push(/boarding-school/${selectedSchools}?gender=${selectedGender}) —— 手动拼接易出错（如未编码特殊字符、忽略已有 query 合并逻辑），且无法兼容 hash 或 scroll 等高级选项。
- 启用 encodeURIComponent：对动态路径段（如 delhi-ncr）进行编码，防止空格、/、? 等非法字符破坏路由结构。
- 依赖数组需完整：useEffect 的依赖项必须包含所有影响 URL 的状态变量，否则跳转会失效或滞后。
- App Router 用户注意：若使用 app/ 目录，请改用 useRouter（来自 next/navigation）及 SearchParams 配合 usePathname + URLSearchParams 构造新 URL，原理类似但 API 不同（示例略，核心思想一致）。
- 首次加载时避免空跳转：可在 useEffect 内加守卫，例如 if (!selectedSchools && !selectedGender) return;，防止初始渲染时跳转到 /boarding-school/。
✅ 最终效果验证
当用户选择 selectedSchools = "delhi-ncr" 且 selectedGender = "male" 时，浏览器地址栏将精准显示：
http://localhost:3000/boarding-school/delhi-ncr?gender=male
若再添加 selectedBudget = "5-10lpa"，则自动更新为：
http://localhost:3000/boarding-school/delhi-ncr?gender=male&budget=5-10lpa
——路径干净、参数清晰、可 bookmark、支持服务端解析，完全符合现代 Next.js 路由最佳实践。
