Let's redirect within the app on button clicks/taps  🖱 👆

This week I gave Ola this task:

  • Redirect from "/signup" to "my.usepow.app/signup"

He went forth and used createRedirect, but it was not working when using the "Get Started" button on usepow.app. A button that is actually a link to "/signup".

Screenshot of the POW! Site header with the "Get Started" button

However, it did not work as expected, I reviewed the code, and it was exactly like I would have solved it.

// gatsby-node.js
exports.createPages = async ({ actions }) => {
  const { createRedirect } = actions;
  createRedirect({
    fromPath: "/signup/",
    toPath: "https://my.usepow.app/signup",
  });
};

After some careful investigation, I realized it worked when hitting usepow.app/signup directly, but not when using the button 🧐

So I had another look at the documentation, and I got what redirectInBrowser is meant for 🤪

// gatsby-node.js
exports.createPages = async ({ actions }) => {
  const { createRedirect } = actions;
  createRedirect({
    fromPath: "/signup/",
    toPath: "https://my.usepow.app/signup",
    redirectInBrowser: true, // 👈👈👈
  });
};

...set redirectInBrowser to true and Gatsby will handle redirecting in the client as well... Gatsby Docs

 
All the best,
Queen Raae

PS: POW! is our privacy-first menstrual cycle journal. If you see talk about period trackers selling data, please point folks towards POW!

Stuck on a reef in the sharky waters around the Gatsby islands?

Book a 1-on-1 Gatsby Call with Queen Raae. Friendly advice you can put into action immediately, guaranteed!

Serious about Gatsby? Sign up for emails sent every weekday to help you get the most out of Gatsby!