reactjs - Next.JS useRouter dinamik bir rota için sadece boş bir nesne döndürecektir

Next.JS'te biraz özel bir takvim uygulaması yapıyorum ve çözümleyemediğim dinamik yönlendirme ile ilgili bazı sorunlar yaşıyorum. Benzer yönlendirmelere sahip iki benzer sayfam var, bunlardan biri mükemmel bir şekilde çalışıyor, diğeri ise hiç çalışmıyor.

İlk sayfa (çalışıyor):

// 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;

İkinci sayfa (çalışmıyor)

// 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;

Çıkış ile

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

Hayatım boyunca anlamıyorum, ikinci sayfanın dinamik yönlendirmesi neden hiç çalışmıyor ve useRouter() kancasından herhangi bir sorgu dönmüyor.

Cevap #1

pages/date/[year]/[month].tsx dosyasını pages/date/[year]/[month]/index.tsx konumuna taşımak işe yarayacaktır

Cevap #2

Ağacınız böyle görünmelidir

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

Belgeleme

İlgili makaleler