如何在react-18n中跳过指定字段（如导航链接）的翻译？

针对你遇到的导航link字段被意外翻译的问题，有两种直接可行的解决思路：

思路1：剥离非翻译字段，只翻译需要本地化的内容 #

这是最简洁且易维护的方案——不要把link这类不需要翻译的字段放到locize的翻译资源里，只将需要本地化的name字段作为翻译键单独管理。

实现步骤： #

1. 在代码中定义原始导航配置（不存入locize）：

// 原始导航配置，仅包含路径和翻译键
const headerNavItems = [
  { link: "/", nameKey: "nav.home" },
  { link: "/about", nameKey: "nav.about" },
  { link: "/products-and-services", nameKey: "nav.productsServices" },
  { link: "/buy-commodities", nameKey: "nav.buyCommodities" },
  { link: "/contact", nameKey: "nav.contact" }
];

2. 在locize中添加对应的翻译键值对：
   • 德语环境下：nav.home → Heim，nav.about → Über，以此类推
3. 在组件中渲染时，仅翻译nameKey对应的内容：

// Client Component 示例（使用react-i18n的useTranslation hook）
import { useTranslation } from 'react-i18next';

export default function Header() {
  const { t } = useTranslation();
  return (
    <nav>
      {headerNavItems.map(item => (
        <a href={item.link} key={item.link}>
          {t(item.nameKey)}
        </a>
      ))}
    </nav>
  );
}

这种方式彻底避免了非翻译字段被locize处理，同时让翻译资源更纯净，维护成本更低。

思路2：在i18next配置中强制跳过指定字段 #

如果已经将整个导航数组存入locize，可通过i18next的postProcess钩子，在翻译完成后强制还原指定字段的原始值：

// i18n初始化配置文件
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import { locizePlugin } from 'locize';

// 提前定义原始导航配置作为基准
const originalNav = [
  { link: "/", name: "Home" },
  { link: "/about", name: "About" },
  // ...其余原始项
];

i18n
  .use(locizePlugin)
  .use(initReactI18next)
  .init({
    // 你的现有配置（语言、namespace等）
    postProcess: (value, key) => {
      // 针对headerNavigation字段处理
      if (key === 'headerNavigation' && Array.isArray(value)) {
        return value.map(translatedItem => {
          // 匹配原始项的link
          const originalItem = originalNav.find(item => item.name === translatedItem.name);
          return {
            ...translatedItem,
            link: originalItem?.link || translatedItem.link
          };
        });
      }
      return value;
    }
  });

注意事项： #

• 思路1更推荐，因为它从根源上分离了翻译与非翻译内容，避免后续维护时的混淆
• 如果使用Next.js 13 App Dir的Server Components，需确保翻译逻辑适配服务端渲染的要求

内容的提问来源于stack exchange，提问作者Joshua