How to disable Navbar component in dynamic routes in next.js.?

Question

I Know one way of doing this is by using the next router, but only in case when the route is static like /dashboard'.But how to do it when the URL is dynamic like '/story/[slug]'.

Layout.js

const Layout=({children })=>{
   if(router.pathname != '/dashboard')

return(
<>
{children()}
</>
)
else{
return(
<>
<Navbar/>
{children()}
</>
)
}
}
export default Layout;

This works but instead of /dashboard i need to implement this in all the dynamic routes under /story like /story/[slug] .

Thanks in advance

What about `router.pathname.includes('/story')`? – juliomalves Jun 25 '22 at 12:02 — juliomalves, Jun 25 '22 at 12:02

score 1 · Accepted Answer · answered Jun 25 '22 at 21:50

I'd use a simple javascript method: includes.

const App = ({ Component, pageProps }) => {
  const router = useRouter();
  const withoutLayoutArray = [
    'story'
  ];

  const isWithoutLayout = withoutLayoutArray.includes(router.pathname);

  return isWithoutLayout ? (
    <Provider store={store}>
      <Component {...pageProps} />
    </Provider>
  ) : (
    <Provider store={store}>
      <NavBar>
        <Component {...pageProps} />
      </NavBar>
    </Provider>
  );
})

How to disable Navbar component in dynamic routes in next.js.?

1 Answers1