如何在 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

您可以使用pathname 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>;
};