Paths not prefixed when using Redirect or navigate

[chasemccoy]

Description

When using the Redirect component or the navigate function of Reach Router, the paths are not prefixed.

Environment

  System:
    OS: macOS 10.14
    CPU: x64 Intel(R) Core(TM) i7-6820HQ CPU @ 2.70GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 8.9.0 - ~/.nvm/versions/node/v8.9.0/bin/node
    Yarn: 1.9.4 - ~/.yarn/bin/yarn
    npm: 6.1.0 - ~/.nvm/versions/node/v8.9.0/bin/npm
  Browsers:
    Chrome: 69.0.3497.92
    Firefox: 62.0
    Safari: 12.0
  npmPackages:
    gatsby: ^2.0.0-rc.23 => 2.0.0-rc.23 
    gatsby-plugin-catch-links: ^2.0.2-beta.10 => 2.0.2-beta.10 
    gatsby-plugin-favicon: ^3.1.2 => 3.1.2 
    gatsby-plugin-google-analytics: next => 2.0.0-beta.5 
    gatsby-plugin-manifest: ^1.0.27 => 1.0.27 
    gatsby-plugin-offline: ^1.0.18 => 1.0.18 
    gatsby-plugin-react-helmet: next => 3.0.0-beta.4 
    gatsby-plugin-sass: next => 2.0.0-beta.10 
    gatsby-plugin-sharp: ^1.6.48 => 1.6.48 
    gatsby-plugin-sitemap: ^1.2.25 => 1.2.25 
    gatsby-plugin-styled-components: next => 3.0.0-beta.3 
    gatsby-plugin-typography: next => 2.2.0-beta.3 
    gatsby-plugin-web-font-loader: ^1.0.4 => 1.0.4 
    gatsby-remark-autolink-headers: ^1.4.18 => 1.4.19 
    gatsby-remark-component: ^1.1.3 => 1.1.3 
    gatsby-remark-copy-linked-files: next => 2.0.0-beta.3 
    gatsby-remark-external-links: ^0.0.4 => 0.0.4 
    gatsby-remark-images: ^1.5.67 => 1.5.67 
    gatsby-remark-smartypants: next => 2.0.0-beta.3 
    gatsby-source-filesystem: next => 2.0.1-beta.10 
    gatsby-transformer-remark: next => 2.1.1-beta.6 
  npmGlobalPackages:
    gatsby-cli: 2.0.0-beta.13

[chasemccoy]

@KyleAMathews looks like this may be a regression of #1533 caused by the switch to Reach Router?

[chasemccoy]

Maybe we are just supposed to use withPrefix for this use case? It didn't handle it automatically before, though.

[KyleAMathews]

Which navigate function are you using?

[KyleAMathews]

We'd have to wrap the Redirect component to add prefixing support. Maybe? Perhaps worth doing.

[chasemccoy]

I am using import { Redirect, navigate } from '@reach/router'

[mikelax]

@chasemccoy I am pretty sure those functions won't work if you are importing directly from the @reach/router package. At the very least you should be importing these from gatsby.

I just confirmed that navigate function imported from gatsby does not respect the pathPrefix config value.

  System:
    OS: macOS Sierra 10.12.6
    CPU: x64 Intel(R) Core(TM) i7-7567U CPU @ 3.50GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 8.10.0 - ~/.nvm/versions/node/v8.10.0/bin/node
    Yarn: 1.9.4 - /usr/local/bin/yarn
    npm: 6.4.1 - ~/.nvm/versions/node/v8.10.0/bin/npm
  Browsers:
    Chrome: 68.0.3440.106
    Safari: 11.1.2
  npmPackages:
    gatsby: next => 2.0.0-rc.28 
    gatsby-link: next => 2.0.0-rc.2 
    gatsby-plugin-favicon: ^3.1.4 => 3.1.4 
    gatsby-plugin-react-helmet: ^2.0.11 => 2.0.11 
    gatsby-plugin-stylus: ^2.0.0-rc.1 => 2.0.0-rc.1 
    gatsby-source-filesystem: next => 2.0.1-rc.1 
    gatsby-transformer-excel: next => 2.1.1-rc.3 
  npmGlobalPackages:
    gatsby-cli: 1.1.58

[kevinmichaelchen]

It seems like there are two ways of using navigate in Gatsby v2.

Method 1: import { navigate } from 'gatsby

When I do this, gatsby build complains about window:

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

Method 2: Destructure navigate from props

When I do this, gatsby build throws an error:

WebpackError: You can't call navigate on the server.

[yash2code]

It seems like there are two ways of using navigate in Gatsby v2.

Method 1: import { navigate } from 'gatsby

When I do this, gatsby build complains about window:

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

Method 2: Destructure navigate from props

When I do this, gatsby build throws an error:

WebpackError: You can't call navigate on the server.

any workaround ?

[derit]

same error

var navigate = function navigate(to, options) {
213 |   window.___navigate(withPrefix(to), options);
    | ^
214 | };