In my code, I have a special Layout component that compares routing queries and displays the appropriate layout based on the query.
I'm looking to extend this functionality to handle dynamic routing scenarios, such as invoices/invoice-1.
Currently, I have a component set up with different layouts specified in a config object. However, simply using configArrays.includes(pathname) isn't providing the desired results.
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>;
};