如何在 Next.js 的 pages 文件夹中获取动态路由路径？

Question

我有一个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>;
};

Answer 1

您可以使用useRouter() 中的pathname，因为它包含/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>;
};