การใช้ฮุก useTranslation

ยินดีต้อนรับ

ฮุก useTranslation

import { useTranslation } from 'react-i18next';

function Header() {
  const { t } = useTranslation('common');
  return <h1>{t('app_title')}</h1>;
}

คีย์การแปลพื้นฐาน

// public/locales/en/common.json
{
  "app_title": "My App",
  "nav": {
    "home": "Home",
    "about": "About"
  }
}

คีย์แบบจุด

const { t } = useTranslation('common');
return <a href="/">{t('nav.home')}</a>;

เนมสเปซเริ่มต้น

i18n.init({ defaultNS: 'common', ... });

// No namespace argument needed
const { t } = useTranslation();
t('app_title'); // resolves in 'common'

การเข้าถึงหลายเนมสเปซ

const { t } = useTranslation(['common', 'auth']);

t('common:app_title');
t('auth:login');

คอมโพเนนต์ Trans สำหรับเนื้อหา JSX

import { Trans } from 'react-i18next';

// JSON: "tos": "Read our <1>Terms</1>"
<Trans i18nKey="tos">
  Read our <a href="/terms">Terms</a>
</Trans>

โครงสร้างไฟล์การแปล

public/
  locales/
    en/
      common.json
      auth.json
      dashboard.json
    tr/
      common.json
      auth.json

การเปลี่ยนภาษาขณะทำงาน

const { i18n } = useTranslation();

<button onClick={() => i18n.changeLanguage('tr')}>Turkish</button>

การตรวจหาภาษาที่ใช้งานอยู่

const { i18n } = useTranslation();
return <p>Current lang: {i18n.language}</p>;

ตรวจสอบอย่างรวดเร็ว

สรุปทบทวน

บทเรียนถัดไป