Gatsby: التنقل لا يعمل في بناء غاتسبي

تم إنشاؤها على ١٢ ديسمبر ٢٠١٨  ·  2تعليقات  ·  مصدر: gatsbyjs/gatsby

وصف

لدي صفحة ، /trial ، أريد التأكد من زيارتها دائمًا باستخدام معلمة المسار. في المنشئ الخاص بي ، أتحقق من this.props.location.search ، وإذا كانت خاطئة (فارغة) ، فأنا أريد الانتقال إلى /trial/?product=foobar .

هذا هو الكود الخاص بي

import React from 'react'
import { navigate } from 'gatsby'

class Foobar extends React.Component {
  constructor(props) {
    super(props)
    this.redirectIfNecessary()
  }

  redirectIfNecessary() {
    // Make prospect the default product
    const { location } = this.props
    const { search } = location
    if (!search) {
      navigate('/trial/?product=foobar', {
        state: {
          product: 'foobar',
        },
      })
    }
  }

  render() {
    return <div>Hello, world</div>
  }
}

التوقعات مقابل الواقع

يعمل هذا بشكل جيد أثناء وقت التطوير ، ولكن عندما أقوم بتشغيل gatsby build أحصل عليه

error Building static HTML for pages failed

See our docs page on debugging HTML builds for help https://goo.gl/yL9lND

  186 | 
  187 | var navigate = function navigate(to, options) {
> 188 |   window.___navigate(withPrefix(to), options);
      | ^
  189 | };
  190 | 
  191 | exports.navigate = navigate;


  WebpackError: ReferenceError: window is not defined

بيئة

gatsby info --clipboard

  System:
    OS: macOS 10.14.1
    CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 11.3.0 - /usr/local/bin/node
    Yarn: 1.12.3 - /usr/local/bin/yarn
    npm: 6.4.1 - /usr/local/bin/npm
  Browsers:
    Chrome: 70.0.3538.110
    Firefox: 63.0.3
    Safari: 12.0.1
  npmPackages:
    gatsby: ^2.0.64 => 2.0.64 
    gatsby-image: ^2.0.20 => 2.0.22 
    gatsby-plugin-manifest: ^2.0.10 => 2.0.11 
    gatsby-plugin-offline: ^2.0.19 => 2.0.19 
    gatsby-plugin-react-helmet: ^3.0.4 => 3.0.4 
    gatsby-plugin-react-svg: ^2.0.0 => 2.0.0 
    gatsby-plugin-sass: ^2.0.7 => 2.0.7 
    gatsby-plugin-sharp: ^2.0.15 => 2.0.15 
    gatsby-source-filesystem: ^2.0.11 => 2.0.11 
    gatsby-transformer-sharp: ^2.1.8 => 2.1.9 
  npmGlobalPackages:
    gatsby-cli: 2.4.6
question or discussion

التعليق الأكثر فائدة

يا @ kevinmichaelchen

فشل Webpack في إنشاء هذا لأن window متاح فقط في المتصفح وليس أثناء وقت الإنشاء.

يمكنك إصلاح هذا عن طريق نقل المكالمة redirectIfNecessary من constructor إلى componentDidMount بدلاً من ذلك. بهذه الطريقة سيتم تشغيلها فقط من جانب العميل وليس أثناء وقت الإنشاء.

يمكنك أيضًا القيام بذلك بشكل إعلاني في وظيفة التجسيد الخاصة بك عن طريق تضمين مكون إعادة التوجيه من جهاز التوجيه

أنا أغلق هذا الآن لأن هذه المشكلة ليست خاصة بـ Gatsby ولكن لا تتردد في إعادة فتحها إذا كان هناك أي شيء آخر.

ال 2 كومينتر

يا @ kevinmichaelchen

فشل Webpack في إنشاء هذا لأن window متاح فقط في المتصفح وليس أثناء وقت الإنشاء.

يمكنك إصلاح هذا عن طريق نقل المكالمة redirectIfNecessary من constructor إلى componentDidMount بدلاً من ذلك. بهذه الطريقة سيتم تشغيلها فقط من جانب العميل وليس أثناء وقت الإنشاء.

يمكنك أيضًا القيام بذلك بشكل إعلاني في وظيفة التجسيد الخاصة بك عن طريق تضمين مكون إعادة التوجيه من جهاز التوجيه

أنا أغلق هذا الآن لأن هذه المشكلة ليست خاصة بـ Gatsby ولكن لا تتردد في إعادة فتحها إذا كان هناك أي شيء آخر.

متصفح المستخدم monads repo كحل سريع لهذا!

https://www.npmjs.com/package/browser-monads

هل كانت هذه الصفحة مفيدة؟
0 / 5 - 0 التقييمات

القضايا ذات الصلة

KyleAMathews picture KyleAMathews  ·  3تعليقات

kalinchernev picture kalinchernev  ·  3تعليقات

totsteps picture totsteps  ·  3تعليقات

benstr picture benstr  ·  3تعليقات

theduke picture theduke  ·  3تعليقات