Next.JS useRouter 只会为动态路由返回一个空对象答案

【问题标题】：Next.JS useRouter will only returns an empty object for a dynamic routeNext.JS useRouter 只会为动态路由返回一个空对象
【发布时间】：2020-12-11 09:17:00
【问题描述】：

我正在 Next.JS 中制作一些专门的日历应用程序，但我在动态路由方面遇到了一些我似乎无法弄清楚的问题。我有两个相似的页面，它们的路线相似，一个工作得很好，另一个根本不工作。

第一页（工作）：

// pages/date/[year]/[month]/[dayOfMonth].tsx
import { useRouter } from "next/router";
import { Day } from "../../../../components/Day";

type StringQueryParams = Record<keyof QueryParams, string>;

interface QueryParams {
  year: number;
  month: number;
  dayOfMonth: number;
}

const transformParams = ({ year, month, dayOfMonth }: StringQueryParams): QueryParams => ({
  year: parseInt(year),
  month: parseInt(month),
  dayOfMonth: parseInt(dayOfMonth),
});

const DayPage: React.FC = () => {
  const { query } = useRouter();
  const params = transformParams(query as StringQueryParams);
  return <Day {...params} />;
};

export default DayPage;

第二页（不工作）

// pages/date/[year]/[month].tsx
import { useRouter } from "next/router";
import { Month } from "../../../components/Month";
import { validateMonth } from "../../../lib/month";

type StringQueryParams = Record<keyof QueryParams, string>;

interface QueryParams {
  month: string;
  year: number;
}

const MonthDisplay: React.FC = () => {
  const router = useRouter();
  debugger;
  const { query } = router;
  const { month: rawMonth, year: rawYear } = query as StringQueryParams;
  console.log("query:", query);
  console.log("router:", router);
  const month = validateMonth(rawMonth);
  const year = parseInt(rawYear);

  return <Month name={month} year={year} />;
};

export default MonthDisplay;

有输出

query: {}
router: ServerRouter {
  route: '/date/[year]/[month]',
  pathname: '/date/[year]/[month]',
  query: {},
  asPath: '/date/[year]/[month]',
  basePath: '',
  events: undefined,
  isFallback: false
}

我似乎无法弄清楚为什么第二页的动态路由根本不起作用，并且没有从 useRouter() 挂钩返回任何查询。

【问题讨论】：

你能解释一下什么不工作以及访问第二页时需要走什么路线吗？
你在什么组件中使用这两个组件
你能在codesandbox或者github上做一个repo吗

标签： reactjs typescript next.js

【解决方案1】：

你的树应该是这样的

Pages
  [years]
    [months]
      index.tsx --> your 2nd page
      [days]
        indes.tsx --> your first page

Documentation

【讨论】：

【解决方案2】：

将pages/date/[year]/[month].tsx 移动到pages/date/[year]/[month]/index.tsx 应该可以工作

【讨论】：