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

问题描述 投票:1回答:1

我正在基于盖茨比建立一个网站。英文内容可通过“ /”访问,德语内容可通过“ / de”访问。这由以下插件处理:https://github.com/angeloocana/gatsby-plugin-i18n

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

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

redirect routing gatsby
1个回答
0
投票

您需要执行类似的操作

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}`);
  }, []);

  return null;
};

export default IndexPage;

[C0的积分]

© www.soinside.com 2019 - 2024. All rights reserved.