Next.js动态路由带参数写法

学习文章要努力，但是不要急！今天的这篇文章《Next.js 动态路由带参数怎么写》将会介绍到等等知识点，如果你想深入学习文章，可以关注我！我会持续更新相关文章的，希望对大家都能有所帮助！

本文详解如何使用 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<string>('');
  const [selectedGender, setSelectedGender] = useState<string>('');
  const [selectedBudget, setSelectedBudget] = useState<string>('');
  // 其他状态...

  useEffect(() => {
    // ✅ 构建纯净的动态路径（不依赖当前 pathname 拼接）
    const basePath = '/boarding-school';
    const urlPath = selectedSchools 
      ? `${basePath}/${encodeURIComponent(selectedSchools)}` 
      : basePath;

    // ✅ 构建结构化查询参数对象（自动处理编码、空值过滤）
    const queryParams: Record<string, string> = {};
    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 (
    <div>
      &lt;select 
        value={selectedSchools}
        onChange={(e) =&gt; setSelectedSchools(e.target.value)}
      >
        <option value="">全部地区</option>
        <option value="delhi-ncr">德里国家首都辖区</option>
        <option value="mumbai">孟买</option>
      &lt;/select&gt;

      <label>
        &lt;input
          type=&quot;radio&quot;
          name=&quot;gender&quot;
          value=&quot;male&quot;
          checked={selectedGender === &apos;male&apos;}
          onChange={() =&gt; setSelectedGender('male')}
        />
        男生
      </label>
      <label>
        &lt;input
          type=&quot;radio&quot;
          name=&quot;gender&quot;
          value=&quot;female&quot;
          checked={selectedGender === &apos;female&apos;}
          onChange={() =&gt; setSelectedGender('female')}
        />
        女生
      </label>
    </div>
  );
};

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 路由系统的核心优势所在。

以上就是《Next.js动态路由带参数写法》的详细内容，更多关于的资料请关注golang学习网公众号！