国际化

packages/i18n/src/locales/
├── en.json
├── zh.json
└── jp.json

{
	"common": {
		"save": "保存",
		"cancel": "取消",
		"loading": "加载中..."
	},
	"auth": {
		"signIn": "登录",
		"signOut": "登出",
		"email": "邮箱",
		"password": "密码"
	}
}

import { useTranslations } from "use-intl";

export function MyComponent() {
	const t = useTranslations("common");

	return <button>{t("save")}</button>;
}

// 翻译：「你好，{name}！」
{
	t("greeting", { name: "张三" });
}

// 翻译：「你有 {count} 个项目」（复数形式）
{
	t("itemCount", { count: 5 });
}

const t = useTranslations();

// 访问嵌套键
{
	t("auth.signIn");
}
{
	t("common.loading");
}

import { useLocale } from "use-intl";
import { useRouter } from "@tanstack/react-router";

export function LanguageSwitcher() {
	const locale = useLocale();
	const router = useRouter();

	const switchLocale = (newLocale: string) => {
		router.navigate({
			to: router.state.location.pathname,
			search: { locale: newLocale },
		});
	};

	return (
		<select value={locale} onChange={(e) => switchLocale(e.target.value)}>
			<option value="en">English</option>
			<option value="zh">中文</option>
			<option value="jp">日本語</option>
		</select>
	);
}