如何在 next.js 中禁用动态路由中的 Navbar 组件？

Question

我知道这样做的一种方法是使用下一个路由器，但前提是路由像

/dashboard'

一样静态。但是当URL像

'/story/[slug]'

一样动态时如何做。

Layout.js

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

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

这行得通，但不是

/dashboard

我需要在

/story

下的所有动态路线中实现它，比如

/story/[slug]

.

提前致谢

Answer 1

我会使用一个简单的 javascript 方法：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>
  );
})

Answer 2

使用 include 确实有意义，但是如果我们在页面内部有 slug 怎么办：[userName]

在这种情况下使用什么。我有 2 个动态路由，其中一个是单个 slug[username]，另一个是多个 slug[...postID]，我想在所有动态路由中隐藏 sideBar。

提前致谢。