Gatsby: Issue with reach/router Redirect component in my gatsby project

[williamtstanley]

I searched for anyone else having this issue and could not find anything.

Description

When using from @reach/router the url in the nav bar is changing as expected however I am getting a blank white screen until I manually refresh. It isn't re-rendering the page that is being routed too.

Steps to reproduce

Have a page that conditionally Redirects. Such as an account page.
if (!loggedIn()) return <Redirect to="/login" />

Expected result

Url in nav bar updates and the page is shown

Actual result

blank page is shown until refresh occurs

Environment

System:
OS: Linux 4.15 Pop!_OS 18.04 LTS
CPU: x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
Shell: 4.4.19 - /bin/bash
Binaries:
Node: 10.9.0 - ~/.nvm/versions/node/v10.9.0/bin/node
npm: 6.2.0 - ~/.nvm/versions/node/v10.9.0/bin/npm
Browsers:
Chrome: 68.0.3440.106
Firefox: 61.0.1
npmPackages:
gatsby: ^2.0.0-rc.0 => 2.0.0-rc.0
gatsby-plugin-emotion: next => 2.0.0-rc.0
gatsby-plugin-facebook-analytics: ^1.0.3 => 1.0.3
gatsby-plugin-google-analytics: ^1.0.31 => 1.0.31
gatsby-plugin-netlify: next => 2.0.0-rc.0
gatsby-plugin-postcss: next => 2.0.0-rc.0
gatsby-plugin-react-helmet: next => 3.0.0-rc.0
gatsby-plugin-robots-txt: ^1.3.0 => 1.3.0
gatsby-plugin-sass: next => 2.0.0-rc.0
gatsby-plugin-stripe-elements: ^1.0.7 => 1.0.7
npmGlobalPackages:
gatsby-cli: 1.1.58

File contents (if changed)

gatsby-config.js: module.exports = { siteMetadata: { siteUrl:https://${localeUrlSubdomain}.fitplanapp.com, title: 'Best Fitness Workout and Personal Trainer App | Fitplan', keywords: [ 'workout apps', 'fitness apps', 'best workout apps', 'exercise apps', 'best fitness apps', 'personal trainer app', 'fitness app', ], description: "Let's shed fat, build muscle, and work on your gym confidence with the Fitplan App. Just pick your plan and personal trainer and workout at home - start today!", }, plugins: [ 'gatsby-source-fitplan', { resolve: 'gatsby-source-sanity', options: { token: process.env.SANITY_TOKEN, projectId: process.env.SANITY_PROJECT_ID, useCdn: false, // ['production', 'stage'].includes(process.env.ACTIVE_ENV) }, }, { resolve: 'gatsby-source-stripe', options: { url:${config.stripe.base}${config.stripe.plans}, }, }, { resolve:gatsby-plugin-google-analytics, options: { trackingId: process.env.GOOGLE_ANALYTICS_ID, head: true, anonymize: false, respectDNT: true, exclude: ['/404'], }, }, { resolve:gatsby-plugin-facebook-analytics, options: { appId: process.env.FACEBOOK_APP_ID, includeInDevelopment: true, debug: false, language: 'en_US', }, }, { resolve: 'gatsby-plugin-emotion', options: activeEnv === 'production' ? { hoist: true, } : { sourceMap: true, autoLabel: true, }, }, { resolve: 'gatsby-plugin-robots-txt', options: { resolveEnv: () => process.env.GATSBY_ENV, env: { development: { policy: [{ userAgent: '*', disallow: ['/'] }], }, stage: { policy: [{ userAgent: '*', disallow: ['/'] }], }, production: { policy: [{ userAgent: '*', allow: '/' }], }, }, }, }, 'gatsby-plugin-react-helmet', 'gatsby-plugin-sass', gatsby-plugin-stripe-elements, 'gatsby-plugin-netlify', // make sure this is last in the array ], };

package.json: { "name": "website", "description": "website", "version": "1.0.0", "author": "Travis Stanley <[email protected]>", "dependencies": { "@babel/core": "^7.0.0-beta.54", "@fortawesome/fontawesome": "^1.1.8", "@fortawesome/fontawesome-free-brands": "^5.0.13", "@fortawesome/fontawesome-free-regular": "^5.0.13", "@fortawesome/fontawesome-free-solid": "^5.0.13", "@fortawesome/react-fontawesome": "0.0.20", "@reach/router": "^1.1.1", "autoprefixer": "^9.1.3", "axios": "^0.18.0", "date-fns": "^2.0.0-alpha.11", "emotion": "^9.2.3", "emotion-server": "^9.2.3", "gatsby": "^2.0.0-rc.0", "gatsby-plugin-emotion": "next", "gatsby-plugin-facebook-analytics": "^1.0.3", "gatsby-plugin-google-analytics": "^1.0.31", "gatsby-plugin-netlify": "next", "gatsby-plugin-postcss": "next", "gatsby-plugin-react-helmet": "next", "gatsby-plugin-robots-txt": "^1.3.0", "gatsby-plugin-sass": "next", "gatsby-plugin-stripe-elements": "^1.0.7", "graphql": "^0.13.2", "node-sass": "^4.9.2", "nuka-carousel": "^4.2.2", "prop-types": "^15.6.1", "react": "^16.4.2", "react-dom": "^16.4.2", "react-emotion": "^9.2.3", "react-facebook-login": "^4.0.1", "react-helmet": "^5.2.0", "react-motion": "^0.5.2", "react-responsive": "^5.0.0", "react-router-dom": "^4.3.1", "react-select": "^2.0.0-beta.7", "react-spring": "^5.3.11", "react-stripe-elements": "^2.0.1", "webpack": "^4.12.0" }, "keywords": [ "gatsby" ], "license": "MIT", "scripts": { "build": "gatsby build", "develop": "gatsby develop", "format": "prettier --write 'src/**/*.js'", "preInstall": "node .preInstall.js", "test": "echo \"Error: no test specified\" && exit 1" }, "devDependencies": { "eslint": "^4.19.1", "eslint-config-airbnb": "^16.1.0", "eslint-config-prettier": "^2.9.0", "eslint-config-react-tools": "^1.2.5", "eslint-plugin-import": "^2.11.0", "eslint-plugin-jsx-a11y": "^6.0.3", "eslint-plugin-react": "^7.8.2", "prettier": "^1.12.0" } }

gatsby-node.js: `exports.onCreatePage = async ({ page, actions }) => {
const { createPage } = actions;

// page.matchPath is a special key that's used for matching pages
// only on the client.
if (page.path.match(/^\/reset-password/)) {
page.matchPath = /reset-password/*;

// Update the page.
createPage(page);

}
};`

gatsby-browser.js: `
require('./src/global/index.scss');
require('@fortawesome/fontawesome/styles.css');

const React = require('react');

const GlobalProvider = require('./src/components/context').default;

exports.onClientEntry = () => {};
// const Provider = props => {props.children};

exports.wrapRootElement = ({ element }) => (
{element}
);
gatsby-ssr.js`: N/A

[williamtstanley]

I am getting the same issue with navigate.

[m-allanson]

That's a bug that should be fixed in Gatsby - for the redirect you can use noThrow as a temporary workaround. See https://github.com/gatsbyjs/store.gatsbyjs.org/pull/126/commits/e19734c41b0b103a7483c2cd5f7b79f550595edb

[williamtstanley]

I used noThrow and while I no longer get errors the page still does not rerender

[m-allanson]

Ok it sounds like this needs a bit more investigation. Are you able to post up a repo that demos that behaviour?

[williamtstanley]

I am unable to reproduce the error in a minimal repo. Which leads me to believe its something in our code or one of the packages that is breaking it.

[m-allanson]

Thanks for the update @williamtstanley 👍 I've opened https://github.com/gatsbyjs/gatsby/issues/7718 to track fixing up Gatsby's redirect handling. I'll close this, but please re-open or create a new issue if you're able to track down what's causing your rerendering issue.

[ghost]

I have similar issue but in my case it is not related to my code. The development environment is working fine but the issue is with the production build.

https://github.com/gatsbyjs/gatsby/issues/8838

Thanks
Aravind

[alfred-pb]

21548 answers the question for this issue