Question

一切都适用于开发，但是当我开始制作时，我得到一个错误： WebpackError: Cannot read property 'pathname' of undefined

但当我console.log(this.props); location: {pathname: "/", ...}显示为其中一个键值对时。

这是我的index.js布局。

以下是代码：

import React from 'react';
import Head from 'components/head';
import Header from 'components/header';
import Footer from 'components/footer';
import PageIsLoading from 'gatsby-page-is-loading';
import PageProgress from 'components/page-progress';
import NoSSR from 'react-no-ssr';

export default class Template extends React.Component {
  render() {
    const {
      madeInUSA,
      freeShipping,
      eaton,
      cornerstone,
      ingot,
      tailgater,
      creditCards,
      comodoSecure
    } = this.props.data;
    console.log(this.props);
    return (
      <div className="layout-container">
        <Head />
        <Header
          homePage={this.props.location.pathname === '/' ? true : false}
          topImage={madeInUSA}
          freeImage={freeShipping}
          homeBoxImages={[ingot, eaton, tailgater, cornerstone]}
        />
        {this.props.children()}
        <Footer footerImages={{ creditCards, comodoSecure }} />
        <NoSSR>
          <PageIsLoading>
            <PageProgress />
          </PageIsLoading>
        </NoSSR>
        <style jsx>{``}</style>
        <style jsx global>{`
          html {
            height: 100%;
            box-sizing: border-box;
          }
          *,
          *:before,
          *:after {
            box-sizing: inherit;
          }
          h1,
          h2,
          h3,
          h4,
          h5,
          h6 {
            font-family: 'Montserrat', 'Helvetica Neue', 'Helvetica', Helvetica,
              Arial, sans-serif;
            font-weight: normal;
            font-style: normal;
            color: #222;
            text-rendering: optimizeLegibility;
            margin-top: 0.2rem;
            margin-bottom: 0.5rem;
            line-height: 1.4;
          }
          body {
            position: relative;
            min-height: 100%;
            margin: 0;

            font-family: 'Montserrat', 'Helvetica Neue', 'Helvetica', Helvetica,
              Arial, sans-serif;
            text-rendering: optimizeLegibility;
          }
          html,
          body {
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
          }
          img {
            max-width: 100%;
          }
          ::selection {
            background-color: #333;
            color: #fff;
          }

          .layout-container {
            padding: 0px 18px;
          }

          hr {
            border: solid #ddd;
            border-width: 1px 0 0;
            height: 0;
            margin: 10px 0;
          }

          p {
            font-family: inherit;
            font-weight: normal;
            font-size: 1rem;
            line-height: 1.6;
            margin-bottom: 1.25rem;
            text-rendering: optimizeLegibility;
          }

          @media (min-width: 1100px) {
            .layout-container {
              max-width: 1100px;
              min-height: 100vh;
              margin: 0 auto;
              background: #fff;
            }

            body {
              background: #e5eaee;
            }
          }
        `}</style>
      </div>
    );
  }
}

export const pageQuery = graphql`
  query HeaderQueries {
    madeInUSA: imageSharp(id: { regex: "/made-in-usa.png/" }) {
      sizes(maxWidth: 162) {
        ...GatsbyImageSharpSizes_noBase64
      }
    }
    freeShipping: imageSharp(id: { regex: "/free-shipping/" }) {
      sizes(maxWidth: 1100) {
        ...GatsbyImageSharpSizes_noBase64
      }
    }
    ingot: imageSharp(id: { regex: "/ingot.png/" }) {
      sizes(maxWidth: 195) {
        ...GatsbyImageSharpSizes_noBase64
      }
    }
    eaton: imageSharp(id: { regex: "/eaton.png/" }) {
      sizes(maxWidth: 195) {
        ...GatsbyImageSharpSizes_noBase64
      }
    }
    cornerstone: imageSharp(id: { regex: "/cornerstone.png/" }) {
      sizes(maxWidth: 195) {
        ...GatsbyImageSharpSizes_noBase64
      }
    }
    tailgater: imageSharp(id: { regex: "/tailgater.png/" }) {
      sizes(maxWidth: 195) {
        ...GatsbyImageSharpSizes_noBase64
      }
    }
    creditCards: imageSharp(id: { regex: "/credit-cards.jpg/" }) {
      sizes(maxWidth: 525) {
        ...GatsbyImageSharpSizes_noBase64
      }
    }
    comodoSecure: imageSharp(id: { regex: "/comodo_secure.png/" }) {
      sizes(maxWidth: 100) {
        ...GatsbyImageSharpSizes_noBase64
      }
    }
  }
`;

Answer 1

在进行gatsby build

之前，您需要为该位置设置默认道具。

示例：

layout.defaultProps = {
  location: {},
}

Answer 2

在v1中，布局组件可以访问历史记录，位置和匹配道具。在v2中，只有页面可以访问这些道具。如果您在布局组件中需要这些道具，请从页面传递它们。

有关更多信息，请检查docs。

WebpackError：使用gatsby和netlify无法读取undefined的属性'pathname'

2 个答案: