SuperAPI AI 工具集

frontend-internationalization-best-practices

前端与建站

查看项目

更新于 10-15 23:24

技能介绍

用途:为 React Router 框架模式应用搭建国际化(i18n),基于 remix-i18next,重点处理中间件检测、语言存储、类型安全以及客户端与服务端的同步。

主要能力与规则: 设置与中间件(关键):用 createI18nextMiddleware 配置检测与类型安全资源,示例:export const [i18nextMiddleware, getLocale, getInstance] = createI18nextMiddleware({ detection: { supportedLanguages: ["es", "en"], fallbackLanguage: "en", cookie: localeCookie }, i18next: { resources }, plugins: [initReactI18next] }); 语言资源按语言定义并再导出,如 app/locales/en/translation.ts。 命名空间(高):小应用用单一命名空间,大应用用多个命名空间(如 common + 路由命名空间)。 语言检测与持久化(关键):优先用 cookie/session 提升速度,数据库作为真实来源;语言切换器把 locale 存入 cookie/session 并保持同步,通过 Set-Cookie 序列化。 客户端与服务端集成(关键):root loader 把 locale 传给 UI 并同步 <html lang dir>;客户端用 htmlTag 检测初始化 i18next;服务端在 SSR 中用 I18nextProvider 复用中间件实例。 资源路由与缓存(高):以 /api/locales/:lng/:ns 提供资源,带校验与缓存头。 UI 用法(中):loader 中用绑定的 t(),组件中用 useTranslation。 404(中):提供 404 路由,使中间件运行并加载翻译。

适用场景:为 React Router 应用添加 i18n、接入 remix-i18next 中间件、实现语言切换或语言检测、从 /api/locales 提供语言资源。

限制:资料未提供安装命令、依赖版本、收费或平台信息,暂未提供。