Umi框架下如何保持页面跳转时的语言一致？

在使用Umi框架开发多语言应用时，保持页面跳转时的语言一致性是一个常见的需求。Umi框架内置了@umijs/plugin-locale插件，可以帮助我们轻松实现多语言支持。为了确保页面跳转时语言一致，可以按照以下步骤进行配置和实现：

1. 安装和配置 @umijs/plugin-locale 插件

首先，确保你已经安装了 @umijs/plugin-locale 插件。如果没有安装，可以通过以下命令安装：

npm install @umijs/plugin-locale --save

然后在 .umirc.ts 或 config/config.ts 文件中配置插件：

export default {
  locale: {
    default: 'zh-CN', // 默认语言
    antd: true, // 如果使用 antd，设置为 true
    baseNavigator: true, // 根据浏览器语言自动切换
  },
};

2. 在页面中使用多语言

在页面中使用 useIntl 或 FormattedMessage 来显示多语言内容。例如：

import { useIntl } from 'umi';

const MyPage = () => {
  const intl = useIntl();
  return (
    <div>
      {intl.formatMessage({ id: 'welcome' })}
    </div>
  );
};

export default MyPage;

3. 保持页面跳转时的语言一致

Umi 的 @umijs/plugin-locale 插件会自动处理语言状态的保持。当你通过 history.push 或 <Link> 进行页面跳转时，语言状态会自动保持一致。

例如，使用 history.push 进行页面跳转：

import { history } from 'umi';

const navigateToAnotherPage = () => {
  history.push('/another-page');
};

或者使用 <Link> 组件进行页面跳转：

import { Link } from 'umi';

const MyPage = () => {
  return (
    <div>
      <Link to="/another-page">Go to Another Page</Link>
    </div>
  );
};

4. 手动切换语言

如果你需要手动切换语言，可以使用 setLocale 方法：

import { setLocale } from 'umi';

const switchLanguage = (lang: string) => {
  setLocale(lang, false); // 第二个参数为 false 表示不重新加载页面
};

5. 处理 URL 中的语言参数

如果你希望在 URL 中包含语言参数（例如 /zh-CN/home），可以通过配置路由来实现：

export default {
  routes: [
    {
      path: '/:lang',
      component: '@/layouts/index',
      routes: [
        { path: '/:lang/home', component: '@/pages/home' },
        { path: '/:lang/about', component: '@/pages/about' },
      ],
    },
  ],
};

然后在页面中获取语言参数：

import { useParams } from 'umi';

const MyPage = () => {
  const { lang } = useParams<{ lang: string }>();
  return (
    <div>
      Current language: {lang}
    </div>
  );
};

6. 总结

通过以上步骤，你可以在 Umi 框架中轻松实现多语言支持，并确保页面跳转时语言状态的一致性。Umi 的 @umijs/plugin-locale 插件会自动处理大部分工作，你只需要在页面中使用 useIntl 或 FormattedMessage 来显示多语言内容，并通过 history.push 或 <Link> 进行页面跳转即可。

如果你有更复杂的需求，比如根据用户偏好或 URL 参数动态切换语言，可以通过 setLocale 方法手动切换语言，并在 URL 中包含语言参数来实现。