NextJS/React 忽略父组件答案

【问题标题】：NextJS/React ignore parent componentNextJS/React 忽略父组件
【发布时间】：2021-08-17 17:08:50
【问题描述】：

我正在使用 NextJS，并且我在 _app.js 中有一个 Layout 组件作为包装器：

export default function MyApp({ Component, pageProps }) {
  return (
      <Layout>
        <Component {...pageProps} />
      </Layout>
  );
}

Layout 组件中只包含一个用于导航网站的顶部导航。

所以我的问题是在我的应用程序的某些页面/路线中顶。

例如在管理仪表板 /admin 或 /about 中

那么我怎么能简单地忽略那个父布局组件呢？

我有 NextJS 的这个解决方案，但我不确定这是否是正确的/最有效的方法：

// Layout.js
const router = useRouter();

 if (router.route === "/dashboard" || router.route === "/about") {
    return <Fragment></Fragment>;
  } else {
    // return layout
  }

感谢您的回答。

【问题讨论】：

标签： javascript reactjs next.js

【解决方案1】：

将<Layout> 组件移动到您的页面。因此，您可以为您的用例制作多个可重用的布局组件。

例如，如果您有一家网上商店，您可能希望为结帐和个人资料页面提供完全不同的布局。只需将其移至所有页面对象即可。

const MyPage = () => {
   return (
      <CheckoutLayout>
         ...
      </CheckoutLayout>
   );
}
export default MyPage

【讨论】：

我认为这对我来说是最好的方法，因为我将有多种布局。谢谢
对于那些只想忽略某些页面中的父组件的人，请查看@Bhojendra Rauniyar 的答案。

【解决方案2】：

您正在正确实施它。但是，如果您有更多路线怎么办？您可以像这样简单地执行：

const noLayout = ['/dashboard', '/about']
if(noLayout.indexOf(router.route) > -1) {
  return <Fragment></Fragment>
} else {
   // ...
}

【讨论】：