react 使用 react-intl包 配置国际化

1.antd组件国际化配置

因为我们的项目依赖于 antd 组件库，所以我们先进行antd的国际化配置 antd官网

import zhCN from 'antd/locale/zh_CN';
// for date-picker i18n
import 'dayjs/locale/zh-cn';

return (
  <ConfigProvider locale={zhCN}>
    <App />
  </ConfigProvider>
);

注意:这里的配置仅对 antd 组件预先设计好的文字生效，对我们自己定义的文字不起任何作用。所以之后我们会使用 react-int 对自己定义的文本进行国际化配置(antd的国际化配置和react-intl进行国际化配置无任何联系，请不要搞混淆了)

2.react-intl基本配置

1.首先下载 react-intl 包

npm install react-intl
#或者
yarn add react-intl

npm install intl //用于兼容性

在现代浏览器环境中，大多数已经内置了国际化 API，因此你可以在大多数情况下不需要下载 intl 包。然而，如果你需要支持一些旧的浏览器（比如 IE 11），则可能需要下载 npm install intl

注意： 要实现 intl 包对旧版本浏览器做兼容，只需要下载，然后在项目入口文件中引入就好，无需写任何代码和任何配置就可以实现低版本浏览器兼容

下面是一个详细的说明，说明如何在项目中引入 intl 以确保在低版本浏览器中的兼容性：

1. 安装 intl 包

npm install intl

import 'intl'; // 入口文件中导入 intl 用于兼容低版本浏览器
import 'locale-data/jsonp/en'; // 如果你的项目中使用了不同的语言，需要引入相应的语言包
import 'locale-data/jsonp/zh'; // 引入中文语言包

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

// 你项目的其他代码...

2.创建语言包en.json 和 zh.json文件（这里只对中英文切换做演示）

{
  "app.greeting": "Hello, World!",
  "hello":"hello"
}

{
  "app.greeting": "你好，世界！",
  "hello":"你好"
}

注意:json文件中的key必须是唯一的，否则会报错;再者两个文件中的key必须保持相同，这样才能实现文字的切换，最后，两个json文件中的数据条数必须保持一致，以避免程序出现错误

3.在App根组件中对react-intl进行配置

import React from 'react';
import ReactDOM from 'react-dom';
// import 'intl'; // 如果需要兼容低版本浏览器，可以在此导入 intl 用于兼容低版本浏览器
import { IntlProvider } from 'react-intl';
import App from './App';
import enMessages from './locales/en.json';
import zhMessages from './locales/zh.json';

const messages = {
  en: enMessages,
  zh: zhMessages
};

const language = navigator.language.split(/[-_]/)[0]; // 根据浏览器语言设置语言
// 为了减少代码的复杂度，这里没有将antd国际化一同在这配置，实际开发中记得另外配置antd的国际化
ReactDOM.render(
  <IntlProvider locale={l