遵循 Gatsby 教程，卡在“意外使用位置”上

Question

遵循 Gatsby 教程，卡在“意外使用位置”上

我在 Gatsby 应用程序中收到此错误。我的代码似乎与我正在遵循的教程相同，我似乎无法弄清楚出了什么问题。错误是

50:10 错误意外使用“位置”无限制全局变量

还有其他页面，可能导入的某些内容导致了冲突。我正在使用节点版本v11.0.0。

代码如下：

src/components/layout.js

import React from 'react'
import PropTypes from 'prop-types'
import Img from 'gatsby-image'
import Helmet from 'react-helmet'
import styled from 'styled-components'
import { StaticQuery, graphql } from 'gatsby'

import Header from './header'
import Archive from './archive'
import './layout.css'

const MainLayout = styled.main`
  max-width: 90%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 6fr 1fr;
  grid-gap: 40px;
`

const Layout = ({ children }) => (
  <StaticQuery
    query={graphql`
      query SiteTitleQuery {
        site {
          siteMetadata {
            title
          }
        }
        file(relativePath: { regex: "/bg/" }) {
          childImageSharp {
            fluid(maxWidth: 1000) {
              ...GatsbyImageSharpFluid
            }
          }
        }
      }
    `}
    render={data => (
      <>
        <Helmet
          title={data.site.siteMetadata.title}
          meta={[
            { name: 'description', content: 'Sample' },
            { name: 'keywords', content: 'sample, something' },
          ]}
        >
          <html lang="en" />
        </Helmet>
        <Header siteTitle={data.site.siteMetadata.title} />
        //**HERE IS WHERE THE ERROR IS HAPPENING**
        {location.pathname === '/' && (
          <Img fluid={data.file.childImageSharp.fluid} />
        )}
        <MainLayout>
          <div>{children}</div>
          <Archive />
        </MainLayout>
      </>
    )}
  />
)

Layout.propTypes = {
  children: PropTypes.node.isRequired,
}

export default Layout

Run Code Online (Sandbox Code Playgroud)

Answer 1

小智 5

您需要添加location到组件声明中：

const Layout = ({ children, location }) => ( ... )

Run Code Online (Sandbox Code Playgroud)

归档时间：	6 年，11 月前
查看次数：	463 次
最近记录：	5 年，4 月前