Community Plugin
View plugin on GitHubgatsby-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
*/
}