用 @umijs/preset-react 插件实现 多语言

@umijs/preset-react 是一个 Umi.js 的 React 预设配置，它提供了多种功能和插件，包括国际化。以下是在 Umi.js 中使用 @umijs/preset-react 实现多语言的步骤：

1. 安装 @umijs/preset-react

npm install @umijs/preset-react --save-dev

2. 在.umirc.ts 或者 config/config.ts 中配置 @umijs/preset-react

export default {
  // ...
  presets: [
    [
      '@umijs/preset-react',
      {
        // 国际化配置
        locale: {
          // 设置默认语言，支持 zh-CN、en-US、ja-JP
          default: 'zh-CN',
          // 设置语言资源文件的目录
          baseNavigator: true,
          // 开启后会自动将路径中的语言信息解析到页面组件的 props 中
          antd: true, // 开启后会自动引入 antd 所需的语言包
        },
      },
    ],
  ],
  // ...
};

3. 创建语言资源文件

在 src/locales 文件夹下创建多个语言资源文件，命名方式为 `{language}.ts`（例如：`zh-CN.ts`、`en-US.ts`），每个文件导出一个对象，对象的键为需要翻译的文本，值为对应的翻译。

// src/locales/zh-CN.ts
export default {
  hello: '你好',
  world: '世界',
};

// src/locales/en-US.ts
export default {
  hello: 'Hello',
  world: 'World',
};

4. 在组件中使用翻译

在组件中使用 `umi/locale` 获取当前语言，然后使用 `formatMessage` 方法进行翻译。

import React from 'react';
import { formatMessage } from 'umi/locale';

export default () => {
  const title = formatMessage({ id: 'hello' }) + ' ' + formatMessage({ id: 'world' });
  return <h1>{title}</h1>;
};

5. 切换语言

通过 `umi/locales` 中提供的 `setLocale` 方法切换语言。

import { setLocale } from 'umi/locale';

// 切换到英文
setLocale('en-US');

以上就是使用 @umijs/preset-react 实现多语言的步骤。