React Router / Remix 集成

Lingo.dev Compiler 可无缝集成 React Router 和最新的 Remix（现为 React Router v7），提供构建时的本地化支持。

请按照以下步骤为您的 React Router 或 Remix 应用程序添加多语言支持。

或者，您可以探索 React Router / Remix 演示项目，亲自体验 Compiler 的功能。

前置条件

  • React Router v6+ 或 Remix
  • Vite 作为构建工具
  • React 18+
  • Node.js 18 或更高版本

第 1 步：安装包

安装 lingo.dev 包：

npm install lingo.dev

第 2 步：配置 Vite

在您的 vite.config.ts 中导入并配置编译器：

import { defineConfig } from "vite";
import lingoCompiler from "lingo.dev/compiler";

const viteConfig = {
  // 您现有的 Vite 配置
};

export default defineConfig(() =>
  lingoCompiler.vite({
    sourceRoot: "app",
    targetLocales: ["es", "fr", "de"],
    models: {
      "*:*": "groq:mistral-saba-24b",
    },
  })(viteConfig),
);

第 3 步：设置身份验证

在 groq.com 创建一个免费账户并添加您的 API 密钥：


# .env

GROQ_API_KEY=gsk_...

第 4 步：添加 Provider

对于 React Router

在您的根组件 (app/root.tsx) 中导入提供程序：

import { LingoProvider } from "lingo.dev/react/client";
import { loadDictionary } from "lingo.dev/react/react-router";
import type { LoaderFunctionArgs } from "react-router";
import { useLoaderData } from "react-router";

// 对于带有数据加载器的 React Router
export async function loader(args: LoaderFunctionArgs) {
  return {
    lingoDictionary: await loadDictionary(args.request),
  };
}

export default function Root() {
  const { lingoDictionary } = useLoaderData<typeof loader>();

  return (
    <LingoProvider dictionary={lingoDictionary}>
      <html>
        <body>
          <Outlet />
        </body>
      </html>
    </LingoProvider>
  );
}

对于 Remix

在您的根路由 (app/root.tsx) 中导入提供程序：

import { LingoProvider } from "lingo.dev/react/client";
import { loadDictionary } from "lingo.dev/react/react-router";
import type { LoaderFunctionArgs } from "react-router";
import { useLoaderData } from "react-router";

export async function loader(args: LoaderFunctionArgs) {
  return json({
    lingoDictionary: await loadDictionary(args.request),
  });
}

export default function App() {
  const { lingoDictionary } = useLoaderData<typeof loader>();

  return (
    <LingoProvider dictionary={lingoDictionary}>
      <html>
        <head>
          <Meta />
          <Links />
        </head>
        <body>
          <Outlet />
          <ScrollRestoration />
          <Scripts />
        </body>
      </html>
    </LingoProvider>
  );
}

第 5 步（可选）：添加语言切换器

创建一个语言切换组件：

import { LocaleSwitcher } from "lingo.dev/react/client";

export function Header() {
  return (
    <header>
      <nav>
        <LocaleSwitcher locales={["en", "es", "fr", "de"]} />
      </nav>
    </header>
  );
}

第 6 步：构建和测试

启动开发服务器：

npm run dev

编译器将自动：

  1. 扫描您的 React 组件以查找可翻译内容
  2. 提取翻译键
  3. 生成 AI 驱动的翻译
  4. 在 lingo/ 目录中创建优化的翻译文件

访问 http://localhost:5173 查看您的多语言应用程序的运行效果。

配置选项

您可以自定义编译器的行为：

export default defineConfig(() =>
  lingoCompiler.vite({
    sourceRoot: "src",
    sourceLocale: "en",
    targetLocales: ["es", "fr", "de", "ja"],
    lingoDir: "lingo",
    debug: false,
  })(viteConfig),
);

服务端渲染

编译器支持客户端渲染和服务端渲染：

客户端组件

// src/components/Welcome.tsx
export function Welcome() {
  return (
    <div>
      <h1>欢迎使用我们的应用</h1>
      <p>此内容会自动翻译</p>
    </div>
  );
}

路由组件

// app/routes/about.tsx
export default function About() {
  return (
    <div>
      <h1>关于我们</h1>
      <p>了解更多关于我们公司的信息</p>
    </div>
  );
}

生产部署

  1. 构建您的应用程序：

    npm run build

  2. 提交翻译文件：

    git add lingo/
git commit -m "添加翻译"

  3. 部署 使用您首选的平台

您的 React Router 或 Remix 应用程序将根据用户偏好或 URL 模式自动提供本地化内容。

下一步