如何在remix-i18next中实现用户自定义语言切换功能

要实现手动切换语言，核心是通过action处理语言切换请求，并在loader中优先读取用户已选择的语言（存在cookie里），未选择时再用request的默认语言。下面是具体修改步骤：

1. 更新Loader逻辑，优先读取用户选择的语言 #

修改loader，先从request的cookie中获取用户手动设置的语言，没有的话再用i18next.getLocale(request)获取默认语言：

import { useChangeLanguage } from "remix-i18next";
import { useTranslation } from "react-i18next";
import i18next from "~/i18next.server";
import { json, LoaderArgs, ActionArgs, redirect } from "@remix-run/node";
import { Form, useLoaderData } from "@remix-run/react";

export async function loader({ request }: LoaderArgs) {
  // 先从cookie读取用户已选语言
  const userSelectedLocale = request.headers.get("Cookie")?.match(/locale=([a-z-]+)/)?.[1];
  // 优先用用户选择的，否则用默认检测的语言
  let locale = userSelectedLocale || await i18next.getLocale(request);
  return json({ locale });
}

export let handle = {
  i18n: "common",
};

2. 添加Action处理语言切换请求 #

新增action函数，接收用户提交的语言参数，设置cookie后重定向回当前页面：

export async function action({ request }: ActionArgs) {
  const formData = await request.formData();
  const newLocale = formData.get("locale") as string;
  // 验证语言是否在你的支持列表里，可自行调整
  const supportedLocales = ["en", "zh-CN"];
  if (!supportedLocales.includes(newLocale)) {
    return redirect(request.url);
  }

  // 设置cookie，有效期可按需调整
  return redirect(request.url, {
    headers: {
      "Set-Cookie": `locale=${newLocale}; Path=/; Max-Age=31536000; HttpOnly; SameSite=Lax`,
    },
  });
}

3. 在Root组件中添加语言切换按钮 #

用Remix的Form组件提交语言切换请求，按钮点击时提交对应语言：

export default function Root() {
  const { locale } = useLoaderData<typeof loader>();
  const { i18n } = useTranslation();
  useChangeLanguage(locale);

  return (
    <html lang={locale} dir={i18n.dir()}>
      <head>
        <Meta />
        <Links />
      </head>
      <body>
        {/* 语言切换按钮区域 */}
        <div style={{ position: "fixed", top: 10, right: 10 }}>
          <Form method="post">
            {/* 根据当前语言显示切换文案 */}
            <button type="submit" name="locale" value={locale === "zh-CN" ? "en" : "zh-CN"}>
              {locale === "zh-CN" ? "Switch to English" : "切换到中文"}
            </button>
          </Form>
        </div>

        <Outlet />
        <ScrollRestoration />
        <Scripts />
        <LiveReload />
      </body>
    </html>
  );
}

关键说明 #

• 用cookie存储用户选择的语言，确保刷新页面或跳转后语言偏好保留
• action中加入语言合法性校验，避免非法语言参数请求
• useChangeLanguage(locale)会自动根据loader返回的locale更新i18n实例语言，保证页面内容同步切换

内容的提问来源于stack exchange，提问作者Martí Serra Molina