Next.js中如何同时获取动态路由参数与URL查询参数？

问题分析 #

你遇到的情况是Next.js动态路由页面（[chapter].js）初始渲染时，router.query仅返回动态路由参数（hello-world），未包含URL查询参数（section=10）。这是因为Next.js加载动态路由页面时，会先解析动态路由参数，页面挂载完成后才会完整解析URL中的查询参数，初始渲染阶段查询参数尚未注入到router.query中。

解决方案 #

通过useEffect监听router.query的变化，待动态路由参数和查询参数都准备完成后再处理：

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

export default function ChapterPage() {
  const router = useRouter();

  useEffect(() => {
    // 确保所有参数都已加载完成
    if (router.query.chapter && router.query.section) {
      console.log("完整参数集合: ", router.query);
      // 在这里执行业务逻辑，比如根据chapter和section加载对应内容
    }
  }, [router.query]); // 监听router.query变化触发逻辑

  return (
    <div>
      {/* 页面内容区域 */}
    </div>
  );
}

额外说明 #

• 确认Link组件使用规范：确保使用Next.js官方Link组件（从next/link导入），而非原生HTML的<a>标签，否则路由切换逻辑可能不符合预期。
• 静态生成(SSG)场景注意：若页面为静态生成，查询参数仅在客户端解析，必须通过客户端的useRouter结合useEffect获取，无法在getStaticProps中拿到查询参数。
• 组件复用场景适配：如果该页面组件被多个页面/组件复用，监听router.query变化能确保每次路由切换时获取最新参数，避免复用组件时的参数缓存问题。

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