Gatsby: how to redirect to a path when the url doesn't match the route created by createPage.

[evershy]

https://github.com/gatsbyjs/gatsby/tree/master/examples/recipe-createPage

Summary

after the command below,

npm run  build

npm run serve

if I change the url http://localhost:8000/Fido to http://localhost:8000/aaa, the browser displays Error: ENOENT..... How can I redirect http://localhost:8000/aaa to http://localhost:8000/Fido or any known item in the dogData.

File contents

gatsby-node.js:

exports.createPages = ({ actions }) => {
  const { createPage } = actions

  const dogData = [
    {
      name: `Fido`,
      breed: `Sheltie`,
    },
    {
      name: `Sparky`,
      breed: `Corgi`,
    },
  ]
  dogData.forEach(dog => {
    createPage({
      path: `/${dog.name}`,
      component: require.resolve(`./src/templates/dog-template.js`),
      context: { dog },
    })
  })
}

[vladar]

The example you posted is the most basic one. You may want to add 404 page and handle non-existing routes as you need.

Also, you can use createRedirect action for a specific redirect routes. There is an example project for its usage.

[evershy]

The example you posted is the most basic one. You may want to add 404 page and handle non-existing routes as you need.

Also, you can use createRedirect action for a specific redirect routes. There is an example project for its usage.

Thanks anyway. how can I redirect /aaa or /bbb which is not the item of dogData to /Fido, the first item, instead of displaying the 404 page. createRedirect seems only works when redirecting a known path to a specified route.

[vladar]

Usually, redirects like this are implemented in your hosting provider settings.

Doing this client-side in Gatsby is possible via a custom 404 page and a navigate function. Any missing route will land there and then you can redirect from there anywhere you want.

Try doing something like this in your custom 404 page:

// pages/404.js
import { useEffect } from 'react';
import { navigate } from 'gatsby';

export default () => {
  useEffect(() => {
    navigate('/Fido');
  }, []);
  return null;
};

[evershy]

Usually, redirects like this are implemented in your hosting provider settings.

Doing this client-side in Gatsby is possible via a custom 404 page and a navigate function. Any missing route will land there and then you can redirect from there anywhere you want.

Try doing something like this in your custom 404 page:

// pages/404.js
import { useEffect } from 'react';
import { navigate } from 'gatsby';

export default () => {
  useEffect(() => {
    navigate('/Fido');
  }, []);
  return null;
};

Thank you. It works!

[github-actions[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.
If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[vladar]

Thank you for opening this, @evershy

We're marking this issue as answered and closing it for now but please feel free to reopen this and comment if you would like to continue this discussion. We hope we managed to help and thank you for using Gatsby! 💜