Next.js Dynamic Route 直接输入URL或刷新页面失效如何解决？

架构老林

2026-9-30

问题根因

这是Next.js Pages Router的默认特性：useRouter 返回的路由对象在页面首次注水（hydrate）完成前，query 字段是空对象。直接访问URL/刷新页面时首次渲染拿不到dashboardID，只有客户端路由跳转（比如点击Link组件跳转）时，路由已经完成初始化，才能直接拿到query参数。

解决方案

方案1：等待路由初始化完成再渲染组件

判断router.isReady为true之后再传递参数，避免首次渲染传undefined导致组件失效，适配静态导出（SSG/Output: 'export'）的场景：

import { useRouter } from 'next/router'

const DashboardPage = () => {
  const router = useRouter();
  // 路由未准备完成时返回加载态即可
  if (!router.isReady) return <div>加载中...</div>;

  const { dashboardID } = router.query;
  return <Dashboard dashboardID={dashboardID}/>;
}

export default DashboardPage

方案2：通过服务端渲染预取参数

如果使用SSR渲染模式，可以在getServerSideProps里直接拿到路由参数，直接传给页面组件，首次渲染就能拿到参数，无需加载态，更利于SEO：

const DashboardPage = ({ dashboardID }) => {
  return <Dashboard dashboardID={dashboardID}/>;
}

export async function getServerSideProps(context) {
  const { dashboardID } = context.params;
  return {
    props: {
      dashboardID
    }
  }
}

export default DashboardPage