Gatsby: навигация не работает в сборке gatsby

Созданный на 12 дек. 2018  ·  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 . Таким образом, он будет работать только на стороне клиента, а не во время сборки.

Вы также можете сделать это декларативно в своей функции рендеринга, включив компонент Redirect из маршрутизатора доступа.

Я закрываю это сейчас, поскольку эта проблема не относится к Гэтсби, но не стесняйтесь открывать снова, если есть что-то еще.

Все 2 Комментарий

Привет @kevinmichaelchen

Webpack не может создать это, потому что window доступен только в браузере, а не во время сборки.

Вы можете исправить это, переместив вызов redirectIfNecessary из constructor в componentDidMount . Таким образом, он будет работать только на стороне клиента, а не во время сборки.

Вы также можете сделать это декларативно в своей функции рендеринга, включив компонент Redirect из маршрутизатора доступа.

Я закрываю это сейчас, поскольку эта проблема не относится к Гэтсби, но не стесняйтесь открывать снова, если есть что-то еще.

Репозиторий монадов браузера пользователя как быстрое решение этой проблемы!

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

Была ли эта страница полезной?
0 / 5 - 0 рейтинги