Gatsby Client-Side External Redirect
Last updated on

Gatsby Client-Side External Redirect


We had a case where we needed to set up a redirect on the client side of Gatsby but we didn’t want to spin up a lambda to handle this one case. A redirect like this wouldn’t be a problem with some of the hosts out there, but we’re just using s3 and Cloudfront for this site.

To set up a quick redirect on the client we can send a redirect link through page context and handle the window location in a useEffect.

gatsby-node.js
{
path: "/path",
component: resolve(__dirname, "../src/templates/EmptyPage.tsx"),
context: {
redirectTo:
"https://someawesomewebsite.com/newLink",
},
},
templates/emptyPage.tsx
import React, { useEffect } from "react";
function isClient() {
return typeof window === "object";
}
export default function EmptyPage({ pageContext }) {
useEffect(() => {
if (isClient() && pageContext?.redirectTo) {
window.location.href = pageContext.redirectTo;
}
}, []);
return <div />;
}

Category: