How to get dynamic route path in pages folder in Next.js?

Question

I have a Layout component where I compares routing query and return the layout according to it.

I want to compare dynamic routing, for example invoices/invoice-1

I currently have the following component but as you can see just configArrays.includes(pathname) doesn't work.

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

juliomalves · Accepted Answer · 2021-06-13 15:22:04Z

2

You can use pathname from useRouter() as it contains the path of the page in /pages, rather than the actual path in the URL. This allows you to match dynamic routes like /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>;
};

answered Jun 13, 2021 at 15:22

juliomalves

51.1k23 gold badges180 silver badges170 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Maradox Over a year ago

Thanks Julio. It prints out /invoices/[id] as expected.

Collectives™ on Stack Overflow

How to get dynamic route path in pages folder in Next.js?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related