React Admin界面仅显示翻译键问题求助

嘿，我来帮你搞定这个React Admin里标准元素只显示翻译键的问题！

问题的根源很简单：React Admin默认依赖国际化（i18n）配置来把翻译键转换成实际的文本内容。如果没有配置i18nProvider，它就只会直接显示原始的翻译键，比如ra.page.list这种。

下面是具体的修复步骤：

1. 安装国际化依赖 #

首先需要安装React Admin官方的国际化包，它基于Polyglot.js实现：

npm install @react-admin/i18n-polyglot
# 或者用yarn
yarn add @react-admin/i18n-polyglot

2. 配置i18nProvider并添加到Admin组件 #

导入必要的模块，创建i18n提供器，然后把它传给Admin组件。React Admin已经提供了多种语言的默认翻译（比如英语），直接用就行：

修改后的完整代码如下：

import React from 'react';
import { Admin, Resource, ListGuesser } from 'react-admin';
import fakeDataProvider from 'ra-data-fakerest';
import { createI18nProvider } from '@react-admin/i18n-polyglot';
import englishMessages from '@react-admin/i18n-polyglot/lib/en';

const fakeData = { region: [ { name: "A" }, { name: "B" } ] };
const dataProvider = fakeDataProvider({ region: fakeData.region }, true);

// 创建i18n提供器，这里用英语作为默认语言
const i18nProvider = createI18nProvider(
    { en: englishMessages }, // 支持的语言包
    'en' // 默认语言
);

class App2 extends React.Component<{}, {}> {
    render() {
        return (
            <Admin dataProvider={dataProvider} i18nProvider={i18nProvider}>
                <Resource name="region" list={ListGuesser} />
            </Admin>
        );
    }
}

export default App2;

3. （可选）添加其他语言支持 #

如果需要支持多语言，比如法语，只需要导入对应的语言包并添加到配置里：

import frenchMessages from '@react-admin/i18n-polyglot/lib/fr';

const i18nProvider = createI18nProvider(
    { 
        en: englishMessages,
        fr: frenchMessages 
    }, 
    'en'
);

这样修改后，React Admin的标准元素（比如列表页的标题、按钮文本等）就会显示正确的翻译内容，而不是翻译键了。

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