gatsby-plugin-client-side-redirect

gatsby-plugin-client-side-redirect

Generates client side redirect html files for redirecting on any static file host like s3 or netlify.

It uses window.location.href = url for redirection

Install

npm install --save gatsby-plugin-client-side-redirect

or

yarn add gatsby-plugin-client-side-redirect

How to use

// In your gatsby-config.js
plugins: [
  `gatsby-plugin-client-side-redirect` // keep it in last in list
];

Redirects

You can create redirects using the createRedirect action.

An example:

createRedirect({ fromPath: '/old-url', toPath: '/new-url', isPermanent: true });

This will generate the following html files:

/old-url/index.html:

<script>window.location.href="/new-url/"</script>

You can use it using the node api provided by gatsby, for an example Let's take createPages

In you gatsby-node.js file, write following

exports.createPages = ({ graphql, actions }) => {
  const {createRedirect} = actions //actions is collection of many actions - https://www.gatsbyjs.org/docs/actions
  createRedirect({ fromPath: '/old-url', toPath: '/new-url', isPermanent: true });
}

Above approach is kind of hard code one, let's have a dynamic approach. Below code is just for understanding and use your schema accordingly

exports.createPages = async ({ graphql, actions }) => {
  const {createRedirect} = actions

  // fetch data from a collection which contains list of urls mapping for redirection
  let response = await graphql(`
  query redirects {
    collectionName {
      old_url
      new_url
    }
  }`)

let data = response.data.collectionName
 
/*
 now iterate over data and create redirect for each url
*/
}