Gatsby: How to redirect unmatched paths to 404 page

Created on 23 Apr 2018 · 2Comments · Source: gatsbyjs/gatsby

Description

How to redirects unmatched Links to a existing Link

Steps to reproduce

Go to a Link which isn't exist.

Expected result

Redirects to 404 component.

Actual result

Directs to a page where it shows the Links (pages) I have in my project with 404 page.

Environment

Gatsby version (npm list gatsby): [email protected]
gatsby-cli version (gatsby --version): 1.1.50
Node.js version: v8.9.4
Operating System: Ubuntu 17.10

File contents (if changed):

gatsby-config.js:

module.exports = {
  siteMetadata: {
    title: `Thidasa Pankaja`,
  },
  plugins: ['gatsby-plugin-react-helmet',
    {
      resolve: `gatsby-plugin-google-analytics`,
      options: {
        trackingId: "xxxxxx",
        // Puts tracking script in the head instead of the body
        head: false,
        // Setting this parameter is optional
        anonymize: true,
        // Setting this parameter is also optional
        respectDNT: true,
      },
    },
  ],
}

package.json:

{
  "name": "gatsby-starter-default",
  "description": "Gatsby default starter",
  "version": "1.0.0",
  "author": "Kyle Mathews <[email protected]>",
  "dependencies": {
    "gatsby": "^1.9.247",
    "gatsby-link": "^1.6.40",
    "gatsby-plugin-google-analytics": "^1.0.31",
    "gatsby-plugin-react-helmet": "^2.0.10",
    "react-helmet": "^5.2.0",
    "styled-components": "^3.2.6"
  },
  "keywords": [
    "gatsby"
  ],
  "license": "MIT",
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "format": "prettier --write 'src/**/*.js'",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "devDependencies": {
    "prettier": "^1.12.0"
  }

Source

thidasapankaja

Most helpful comment

Hey guys!

I'm currently hosting a Gatsby build on a firebase instance.

Everything works like a charm 👌 except the 404.

What happens is that for any "wrong" urls such as /foo-bar, firebase renders the 404.html page that Gatsby has created. All good so far, but then the JS kicks in, and the React routing doesn't match the current url (it doesn't find any page to render), therefore removes from the DOM the pre-rendered elements.

According to the previous comment, that should be fixed in production but I still have the issue.

Any hint on how to fix this? Worst case scenario I could set up some redirects rules within the Firebase configuration, but I'd love to know if Gatsby is able to handle situations like this.

Thank you very much!

Danetag on 12 Jun 2018

👍7

All 2 comments

In production build, it directs to 404 page.

thidasapankaja on 23 Apr 2018

👍2