如何使用Clerk with Remix进行本地化？

Question

在 Remix 应用程序的 root.tsx 文件中使用 Clerk：

import { ClerkApp } from "@clerk/remix";

function App() {
  const { locale } = useLoaderData<LoaderData>(); // It can be changed by client value

  return (
    <html lang={locale}>
      <head>
        <Meta />
        <Links />
      </head>
      <body>
        <Outlet />
        <ScrollRestoration />
        <Scripts />
        <LiveReload />
      </body>
    </html>
  );
}

const enLocalization = {
  ...enUS,
  ...{
    signUp: { start: { subtitle: "{{applicationName}}" } },
  },
};

const jaLocalization = {
  ...jaJP,
  ...{
    signUp: { start: { subtitle: "{{applicationName}}" } },
  },
};

// How to set localization based on user locale browser language?

export default ClerkApp(App, { localization: enLocalization });

文档中，在

ClerkApp

函数之外提供了

App

：

https://clerk.com/docs/references/remix/clerk-app

但是如果语言环境检查在

App

函数内部，如何将

localization

设置为

ClerkApp

？

Answer 1

要根据用户的浏览器语言在

ClerkApp

组件中设置本地化，您可以在

App

组件外部执行语言检测，然后将适当的本地化对象作为 prop 传递给

ClerkApp

。您可以通过使用像

useEffect

这样的挂钩在组件安装时运行一次代码来实现此目的。您可以通过以下方式修改代码来实现此目的：

import { ClerkApp } from "@clerk/remix";
import { useEffect, useState } from "react";
import { useLoaderData } from "@remix-run/react";

function App() {
  const { locale } = useLoaderData<LoaderData>(); // It can be changed by client value

  return (
    <html lang={locale}>
      <head>
        <Meta />
        <Links />
      </head>
      <body>
        <Outlet />
        <ScrollRestoration />
        <Scripts />
        <LiveReload />
      </body>
    </html>
  );
}

const enLocalization = {
  ...enUS,
  ...{
    signUp: { start: { subtitle: "{{applicationName}}" } },
  },
};

const jaLocalization = {
  ...jaJP,
  ...{
    signUp: { start: { subtitle: "{{applicationName}}" } },
  },
};

function Root() {
  const [localization, setLocalization] = useState(enLocalization); // Default to English

  useEffect(() => {
    // Perform language detection here, you can use libraries like 'navigator.language'
    const userLanguage = navigator.language.split("-")[0]; // Extracting language code

    // Set localization based on user language
    if (userLanguage === "ja") {
      setLocalization(jaLocalization);
    } else {
      setLocalization(enLocalization);
    }
  }, []);

  return (
    <ClerkApp localization={localization}>
      <App />
    </ClerkApp>
  );
}

export default Root;

在此修改版本中：

```
Root
```
组件将
```
App
```
组件包装在
```
ClerkApp
```
内。
它使用
```
useState
```
来管理
```
localization
```
状态。
在
```
useEffect
```
钩子，它检测用户的浏览器语言（
```
navigator.language
```
）并相应地设置本地化。
则
```
localization
```
状态为作为 prop 传递给
```
ClerkApp
```
组件。

如何使用Clerk with Remix进行本地化？

问题描述投票：0回答：1

1个回答

最新问题

如何使用Clerk with Remix进行本地化？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1