react umi 如何实现多语言切换

React Umi支持多语言切换，以下是实现方法：

1. 安装umi-plugin-locale插件：运行`npm install umi-plugin-locale --save-dev`或`yarn add umi-plugin-locale --dev`。

2. 在.umirc.js文件中配置locale插件：

export default {
  plugins: [
    ['umi-plugin-locale', {
      default: 'zh-CN',
      baseNavigator: true,
      antd: true,
    }],
  ],
};

其中，default为默认语言，baseNavigator为基于浏览器语言设置语言，antd为使用Ant Design组件的多语言支持。

3. 在src/locales目录下创建语言文件，如zh-CN.js、en-US.js，其中包含对应语言的翻译信息：

export default {
  'app.title': 'React Umi 多语言示例',
  'app.hello': '你好 {name}！',
};

4. 在组件中使用intl对象实现多语言切换。在组件中引入FormattedMessage组件，并使用intl.formatMessage方法获取对应翻译信息：

import { FormattedMessage } from 'umi/locale';

function Hello(props) {
  const { name } = props;
  return (
    <div>
      <h1>
        <FormattedMessage id="app.title" />
      </h1>
      <p>
        <FormattedMessage id="app.hello" values={{ name }} />
      </p>
    </div>
  );
}

其中，id属性对应语言文件中的键值，values属性为动态参数。

5. 实现语言切换功能。可以通过点击按钮或链接等方式触发切换语言的函数，然后调用intl对象的setLocale方法切换语言：

import { connect } from 'dva';
import { Button } from 'antd';
import { FormattedMessage, setLocale } from 'umi/locale';

function LanguageSwitch(props) {
  const { dispatch } = props;
  return (
    <div>
      <Button
        onClick={() => {
          setLocale('en-US', false);
          dispatch({ type: 'global/changeLocale', payload: 'en-US' });
        }}
      >
        <FormattedMessage id="lang.en-US" />
      </Button>
      <Button
        onClick={() => {
          setLocale('zh-CN', false);
          dispatch({ type: 'global/changeLocale', payload: 'zh-CN' });
        }}
      >
        <FormattedMessage id="lang.zh-CN" />
      </Button>
    </div>
  );
}

export default connect()(LanguageSwitch);

在setLocale方法中，第一个参数为切换的语言类型，第二个参数为是否使用浏览器语言设置。在dispatch方法中，将语言类型传递给dva model中的changeLocale函数，实现全局语言切换。