本文详解如何使用 next.js 的 `router.push()` 正确生成形如 `/boarding-school/delhi-ncr?gender=male&somekey=value` 的动态 url，避免路径重复拼接问题，并推荐最佳实践写法。
在 Next.js（尤其是 App Router）中，动态路由与查询参数的组合常因误用字符串拼接导致 URL 层级混乱，例如出现 /boarding-school/boarding-school/boarding-school/delhi-ncr 这类重复路径。根本原因在于：直接对 pathname 字符串进行 += 拼接，而未考虑当前路由上下文，且未利用 Next.js 路由器的声明式参数能力。
✅ 正确做法是：将路径（pathname）与查询参数（query）分离传递给 router.push()，由路由器自动序列化并跳转——这既语义清晰，又完全规避手动拼接风险。
✅ 推荐实现（App Router + useRouter）
'use client';
import { useRouter, usePathname } from 'next/navigation';
import { useEffect, useState } from 'react';
const Listing = () => {
const router = useRouter();
const pathname = usePathname(); // 获取当前路径（如 /boarding-school/[slug]）
const [selectedSchools, setSelectedSchools] = useState('');
const [selectedGender, setSelectedGender] = useState('');
const [selectedBudget, setSelectedBudget] = useState('');
// 其他状态...
useEffect(() => {
// ✅ 构建纯净的动态路径（不依赖当前 pathname 拼接）
const basePath = '/boarding-school';
const urlPath = selectedSchools
? `${basePath}/${encodeURIComponent(selectedSchools)}`
: basePath;
// ✅ 构建结构化查询参数对象（自动处理编码、空值过滤）
const queryParams: Record = {};
if (selectedGender) queryParams.gender = selectedGender;
if (selectedBudget) queryParams.budget = selectedBudget;
// 可继续添加：queryParams.board = selectedBoard;
// ✅ 声明式导航：传入 { pathname, query } 对象
router.push({
pathname: urlPath,
query: queryParams,
});
}, [selectedSchools, selectedGender, selectedBudget, router]);
return (
);
};
export default Listing; ⚠️ 关键注意事项
- 不要字符串拼接 pathname：原代码中 urlSegment = '/' + selectedSchools + pathname 是典型错误——pathname 已含 /boarding-school/[slug]，再拼会导致嵌套。
- 使用 encodeURIComponent() 处理动态段：确保 delhi-ncr 等含连字符或空格的值安全（Next.js 会自动解码，但手动编码更健壮）。
- 空值处理：query 对象中 undefined 或空字符串键会被自动忽略，无需额外判断（但显式 if 更清晰）。
- 服务端兼容性：上述写法适用于 App Router（next/navigation）。若仍在 Pages Router，请改用 next/router 并注意 useRouter 返回值结构差异。
- 性能优化：useEffect 依赖项必须完整包含所有影响 URL 的状态，否则可能跳转滞后或漏更新。
? 进阶提示：保留原有查询参数
若需在跳转时保留部分现有参数（如分页 page=2），可合并 useSearchParams()：
const searchParams = useSearchParams();
const existing = Object.fromEntries(searchParams.entries());
router.push({
pathname: urlPath,
query: { ...existing, gender: selectedGender }, // 合并而非覆盖
});通过结构化路径与参数分离的设计，你不仅能彻底解决 URL 重复问题，还能让路由逻辑更可维护、可测试——这是 Next.js 路由系统的核心优势所在。
