Redirect Gatsby中基于浏览器语言的重定向

我正在盖茨比的基础上建立一个网站。英语内容可通过“/”访问，德语内容可通过“/de”访问。这由以下插件处理：

现在我想检测浏览器语言并将用户重定向到“/”或“/de”。到目前为止，我所理解的是，在Gatsby中获得这种行为并不容易，因为Gatsby在服务器端呈现和构建路由

---

检测用户的语言并重定向到“/”或“/de”的最佳方法是什么

更新：

{replace:true}

是为了支持Firefox等浏览器而添加的。阅读此答案下面的注释，了解何时使用

{replace:true}

的更好上下文。感谢弗雷德里克·贝滕斯的提醒

import React, { useEffect } from "react";
import { navigate } from "gatsby";

const getRedirectLanguage = () => {
  if (typeof navigator === `undefined`) {
    return "en";
  }

  const lang = navigator && navigator.language && navigator.language.split("-")[0];
  if (!lang) return "en";

  switch (lang) {
    case "ja":
      return "ja";
    default:
      return "en";
  }
};

const IndexPage = () => {
  useEffect(() => {
    const urlLang = getRedirectLanguage();

    navigate(`/${urlLang}/`, {replace: true});
  }, []);

  return null;
};

export default IndexPage;

---

这打破了firefox中的后退按钮，你有解决方案吗？哦，我没有在firefox上测试。我没有，但可以提供解决方案。我提交了一个编辑供批准来修复它，基于：是的，为什么返回按钮不使用替换，我们实际上是意外地成为这些恶意网站之一。问题是，如果没有替换，用户按“上一步”按钮后会返回到原始页面，该页面会立即再次重定向。对于希望使用盖茨比导航进行自动重定向以外的其他操作的未来读者，例如单击按钮导航或基于用户操作的其他重定向，你不会用替换的。它仅适用于您通常希望使用的自动重定向。