لدي صفحة ، /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
يا @ kevinmichaelchen
فشل Webpack في إنشاء هذا لأن window
متاح فقط في المتصفح وليس أثناء وقت الإنشاء.
يمكنك إصلاح هذا عن طريق نقل المكالمة redirectIfNecessary
من constructor
إلى componentDidMount
بدلاً من ذلك. بهذه الطريقة سيتم تشغيلها فقط من جانب العميل وليس أثناء وقت الإنشاء.
يمكنك أيضًا القيام بذلك بشكل إعلاني في وظيفة التجسيد الخاصة بك عن طريق تضمين مكون إعادة التوجيه من جهاز التوجيه
أنا أغلق هذا الآن لأن هذه المشكلة ليست خاصة بـ Gatsby ولكن لا تتردد في إعادة فتحها إذا كان هناك أي شيء آخر.
متصفح المستخدم monads repo كحل سريع لهذا!
التعليق الأكثر فائدة
يا @ kevinmichaelchen
فشل Webpack في إنشاء هذا لأن
window
متاح فقط في المتصفح وليس أثناء وقت الإنشاء.يمكنك إصلاح هذا عن طريق نقل المكالمة
redirectIfNecessary
منconstructor
إلىcomponentDidMount
بدلاً من ذلك. بهذه الطريقة سيتم تشغيلها فقط من جانب العميل وليس أثناء وقت الإنشاء.يمكنك أيضًا القيام بذلك بشكل إعلاني في وظيفة التجسيد الخاصة بك عن طريق تضمين مكون إعادة التوجيه من جهاز التوجيه
أنا أغلق هذا الآن لأن هذه المشكلة ليست خاصة بـ Gatsby ولكن لا تتردد في إعادة فتحها إذا كان هناك أي شيء آخر.