Как получить динамический путь маршрута в папке "Страницы" в Next.js?

#javascript #routes #next.js

Вопрос:

У меня есть Layout компонент, в котором я сравниваю запрос маршрутизации и возвращаю макет в соответствии с ним.

Я хочу сравнить динамическую маршрутизацию, например invoices/invoice-1

В настоящее время у меня есть следующий компонент, но, как вы можете видеть, он просто configArrays.includes(pathname) не работает.

 const config = {
  layout1: ['/invoices/[id]'],
  layout2: ['/route/sign-in'],
};

const Layout = ({ children }) => {
  const { asPath } = useRouter();
  const url = new Url(asPath, true);
  const pathname = url.pathname;

  if (config.layout1.includes(pathname)) {
    return <Layout1>{children}</Layout1>;
  }

  if (config.layout2.includes(pathname)) {
    return <Layout1>{children}</Layout1>;
  }

  return <DefaultLayout>{children}</DefaultLayout>;
};

Ответ №1:

Вы можете использовать pathname from useRouter() , так как он содержит путь к странице /pages , а не фактический путь в URL. Это позволяет сопоставлять динамические маршруты, такие как /invoices/[id] .

 const Layout = ({ children }) => {
    const { pathname } = useRouter();

    if (config.layout1.includes(pathname)) {
        return <Layout1>{children}</Layout1>;
    }

    if (config.layout2.includes(pathname)) {
        return <Layout2>{children}</Layout2>;
    }

    return <DefaultLayout>{children}</DefaultLayout>;
};