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

Question

我正在建立一个基于 Gatsby 的网站。英语内容可以用“/”访问，德语内容可以用“/de”访问。这由以下插件处理：https : //github.com/angeloocana/gatsby-plugin-i18n。

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

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

Answer 1

你需要做这样的事情

更新：{replace: true}添加了支持 Firefox 等浏览器的功能。请阅读此答案下面的评论，以更好地了解何时使用{replace: true}. 感谢 Frederik Baetens 的提醒。

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;

致谢https://github.com/gatsbyjs/gatsby/issues/21548