🐛 [BUG]antd-pro 国际化切换语言关闭页面刷新，tabs的语言不切换

[yeyuxin777]

🐛 bug 描述

打开了umi max的多tabs和keepalive,并且在切换语言时使页面不刷新。这种情况下，切换语言，tab的title的语言没有更新

📷 复现步骤 | Recurrence steps

使用demo-tabs分支的代码，在src/RightContent/index.tsx文件中的SelectLang添加reload={false},打开多个tab标签后切换语言

🏞 期望结果 | Expected results

tabs标签的title也变成切换后的语言

💻 复现代码 | Recurrence code

© 版本信息

• Ant Design Pro 版本: [e.g. 4.0.0]
• umi 版本
• 浏览器环境
• 开发环境 [e.g. mac OS]

🚑 其他信息

[chenshuai2144]

TAutomatically replying with ChatGPT can be attempted, but it cannot be guaranteed to be completely accurate and may not fully address all issues. Please feel free to reply if you have any further questions or concerns.
此回复基于 ChatGPT 自动生成，可以尝试下方案，官方人员会在一定时间后继续继续处理。

解决方案

问题的根源是使用了 umi 的 keepalive 功能导致在切换语言时页面不刷新，而 antd-pro 的国际化切换语言只会触发 antd 组件的重新渲染，而不会触发页面的重新渲染。

要解决这个问题，有以下几个步骤：

1. 禁用页面的缓存，让页面在切换语言时重新加载。在 src/RightContent/index.tsx 文件中找到 SelectLang 组件的代码，将 reload 设置为 true。

<SelectLang reload={true} />

2. 在每个 tab 的组件中，手动获取当前的语言，并根据语言来更新 tab 的标题。

import React from 'react';
import { useIntl } from 'umi';

const TabComponent = () => {
  const { formatMessage } = useIntl();
  const currentLocale = localStorage.getItem('umi_locale'); // 获取当前语言

  return (
    <div>
      <h2>{formatMessage({ id: 'tab.title', defaultMessage: 'Tab Title' })}</h2>
      {/* other content */}
    </div>
  );
};

export default TabComponent;

在上面的代码中，使用 useIntl 钩子来获取 umi 的国际化对象，并使用 formatMessage 方法来获取对应语言的文本。

3. 在 locales 文件夹中的语言文件中，为每个 tab 的标题提供翻译文本。例如，在 locales/zh-CN.js 中，添加：

export default {
  // other translations
  'tab.title': '标签标题',
};

在 locales/en-US.js 中，添加：

export default {
  // other translations
  'tab.title': 'Tab Title',
};

通过这样的方式，在切换语言时，tab 的标题会根据当前语言进行更新。

参考文档

• Ant Design Pro - 国际化
• umi - 国际化

[KYX1234]

是需要用6.0.0.1那个分支的代码吗，我跑起来报错

[chenshuai2144]

值得注意是的百分之二十的问题都可以用重装依赖来解决，所以你可以尝试一下：
删除 'node_modules' 文件夹 -> 删除 'package-lock.json'或 'pnpm-lock.yaml' 文件 -> 运行 'pnpm install' 或 'npm install' 命令

这个问题是由于在切换语言时，某些组件的语言没有实时切换导致的。Antd Pro中使用了context来管理语言的切换，但是某些组件可能没有优化得很好，context的修改不会重新渲染这些组件，或者这些组件上下文不存在。

为了解决这个问题，可以通过配置的方式来实现完全重新渲染页面。具体做法是在切换语言的时候，使用umi-plugin-react/locale提供的setLocale方法，并将第二个参数设置为true来强制刷新页面。例如：

import { setLocale } from 'umi-plugin-react/locale';

// 设置第二个参数为 true 即可强制刷新
setLocale(key, true);

这样，在切换语言后，页面将会重新加载，从而实现完全重新渲染的效果，确保所有组件的语言都能正确切换。 如果不想这样做可以给相应的组件设置一个 key，强制这些组件刷新