urlnext.jsnext-routerdynamic-routing

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


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


Solution

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