如何使用 gatsby 将特定 url 重定向到主页而不是重定向到 404？

Question

我有一个 url 例如 mysite.com?utm_source=fb 当用户触发这个 url 需要重定向到主页。我试过客户端重定向插件但没有成功

谢谢。

Answer 1

使用 onClientEntry API (from Gatsby browser) 在用户进入您的网站后触发一个功能。在你的 gatsby-browser.js:

export const onClientEntry = () => checkUtm();

checkUtm() 是您的检查器功能，将其放置在您想要的任何位置并将其导入您的 gatsby-browser.js。该函数应如下所示：

export const checkUtm = ()=>{
    if (typeof window !== "undefined"){
      const queryString = window.location.search;
      const urlParams = new URLSearchParams(queryString);
      const fromFb = urlParams.get('utm_source') === "fb";
    
      if(fromFb) navigate("/");
    }
}

typeof window !== "undefined" 条件对于避免代码破坏很重要，因为在编译时，window (or other global objects) may not be defined yet.

其余代码可以根据您的具体要求进行操作，我添加了 navigate from Gatsby，但可以根据需要进行更改。

I have one more doubt in the same if i have url ex: mysite.com?utm_source=IwAR1AjzvBHLFOp0CeER8X1XdBgGbLDyK9hDh2dVBe15ZXnWjEAae-C0sT67M like this and every time string will change how to implement

这应该有效：

export const checkUtm = ()=>{
    if (typeof window !== "undefined"){
      const queryString = window.location.search;
      const urlParams = new URLSearchParams(queryString);
      const hasUtmSource = urlParams.get('utm_source');
    
      if(hasUtmSource) navigate("/");
    }
}

const hasUtmSource = urlParams.get('utm_source'); 语句将获取 utm_source 参数的任何值，因此，如果它存在，它将验证下一个条件，使 navigate("/").

如何使用 gatsby 将特定 url 重定向到主页而不是重定向到 404？

How to Redirect particular url to homepage instead of redirecting to 404 using gatsby?

reactjs

strapi

gatsby