本文详解如何使用 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 路由系统的核心优势所在。