Question

当前行为

嗨。我正在使用Gatsby，并且我的布局组件（包含页眉和页脚）都放置在 gatsby-browser.js 和 gatsby-ssr.js的wrapPageElement 中。但是，这样做会在每个页面上呈现布局。我将布局组件放置在了gatsby-browser和gatsby-ssr内，因为标题中包含动态内容-如果用户通过了身份验证，它将显示用户的电子邮件和导航链接

期望的行为

我希望我的索引页不要用布局包裹，因为它只是设计的静态页面，不会有任何动态内容

此后，有什么办法可以在index.js中没有Layout的情况吗？谢谢

gatsby-ssr.js和gatsby-browser.js

export const wrapPageElement = ({ element, props }) => {
      return <Layout {...props}>{element}</Layout>
    }

index.js

//由于布局组件位于gatsby-ssr和gatsby-browser.js中，因此仍在呈现同时包含页眉和页脚的布局

import React from "react"
import { Link } from "gatsby"

import { Container } from "../components/common"
import SEO from "../components/seo"

const IndexPage = props => {
  return (
    <Container>
      <SEO title="Home" />
      <div>
        <Link to="/account">Go to your account</Link>
      </div>
    </Container>
  )
}

export default IndexPage

Answer 1

从gatsby-ssr和gatsby-browser.js中删除布局。将其放置在所有pages组件中。

您的index应该如下所示：

const IndexPage = props => {
  return (
    <Layout {...props}>
      <Container>
        <SEO title="Home" />
        <div>
          <Link to="/account">Go to your account</Link>
        </div>
      </Container>
    </Layout>
  )
}

您应该只将想要的组件放在gatsby-ssr和gatsby-browser.js中的每个页面上，例如react-helmet或整个页面范围的React Context。

您不希望布局显示在索引上，因此无法将其放置在gatsby-ssr和gatsby-browser.js中。

Answer 2

对于仍在寻找其他解决方案的任何人：

这可以通过检查“children.key”的值来实现，对于您传递给每个页面的布局组件的元素/子项。该值包含该页面的路径。

因此在您的 Layout 组件中，您可以简单地检查调用它的页面路径，然后确定要呈现的内容。

例如，我不想在带有路径“/no_layout”的页面上呈现“导航”和“页脚”，那么我将在 Layout.jsx 中执行此操作：

const Layout = ({ children, props }) => {
  // Conditionally don't show top and bottom nav
  if (children.key === '/no_layout') {
    return <>{children}</>
  }

  return (
    <>
      <Navigation />
      {children}
      <Footer />
    </>
  )
}

export default Layout

或者，如果您有多个页面/路径想要从常规布局中排除并且可能具有全屏布局，那么您可以将它们放在一个列表中并检查当前路径是否存在：

const fullScreenPaths = [
  '/no_layout',
  '/never_layout',
  '/skip_layout',
  '/nope_layout',
  '/hellno_layout',
]

const Layout = ({ children, props }) => {
  // Conditionally don't show top and bottom nav
  if (fullScreenPaths.includes(children.key)) {
    return <>{children}</>
  }

  return (
    <>
      <Navigation />
      {children}
      <Footer />
    </>
  )
}

export default Layout

感谢 this old comment on github 让我走上正轨。

如果你不完全理解我对“key”的意思，那么就：

console.log(children)

查看可用于渲染布局的所有值。

《盖茨比》中的布局条件渲染

2 个答案: