كيفية إضافة عدة لغات لتطبيق React js

ﻻ يوجد طريقة موحدة لدعم اللغات المتعددة في الموقع ولكن أحد أشهر الطرق كالأتي

1. نقوم أولًا بإنشاء ملفات الreact لكل لغة ملفٍ

2. ونقوم بوضع param في نهاية كل route باسم lang نستقبله بالشكل التالي 

   const [searchParams, setSearchParams] = useSearchParams();
   searchParams.get("lang")

    

3. ومن ثم بناءًا على قيمة الparam نقوم بتحديد الصفحة التي سيتم إرسالها للمستخدم 

   const App = ()=>{
     const [searchParams, setSearchParams] = useSearchParams();
   return(
     {searchParams.get("lang")=='eng'?<EngComponent/>:<AraComponent/>}  
   )
   }

    

يمكنك القيام بهذا الأمر يدويًا كما وضح شرف الدين في إجابته، كما تستطيع أن تستخدم حزمة مخصصة لهذا الأمر مثل react-i18next والتي تختص في إضافة ميزة تعدد اللغات إلى تطبيقات React و React Native بشكل سهل، عليك أن تقوم بتثبيت الحزمة في البداية من خلال npm:

npm install react-i18next i18next --save

الآن يمكنك أن تستعمل الحزمة بشكل بسيط كما في المثال التالي:

import React from "react";
import ReactDOM from "react-dom";

// إستدعاء المكتبة وبعض الدوال منها
import i18n from "i18next";
import { useTranslation, initReactI18next } from "react-i18next";

i18n
  .use(initReactI18next) // passes i18n down to react-i18next
  .init({
    // هنا يتم وضع الترجمات
    // يمكنك أن تقوم بوضعهم في ملف json وإستدعائه هنا
    resources: {
      en: {
        translation: {
          "Welcome to React": "Welcome to React and react-i18next"
        }
      },
      fr: {
        translation: {
          "Welcome to React": "Bienvenue à React et react-i18next"
      }
    },
    lng: "en",
    fallbackLng: "en",
  });

function App() {
  const { t } = useTranslation();

  return <h2>{t('Welcome to React')}</h2>;
}

// append app to dom
ReactDOM.render(
  <App />,
  document.getElementById("root")
);

وتستطيع الإطلاع على سؤال مشابهة عن كيفية تغير اللغة في هذه الحزمة من هنا:

يمكنك الإطلاع على مزيد من الأمثلة من خلال موقع الحزمة الرسمي react.i18next

يمكنك استعمال مكتبة react-i18next أولا قم بتثبيتها

npm install react-i18next i18next --save

// اذا كنت تريد دمج التحقق التلقائي للغة فستضيف أيضا هذه المكتبات
npm install i18next-http-backend i18next-browser-languagedetector --save

قم بإنشاء ملف جديد i18n.js بجانب index.js الخاص بك يحتوي على المحتوى التالي:

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

import Backend from 'i18next-http-backend';
import LanguageDetector from 'i18next-browser-languagedetector';


i18n
  .use(Backend)
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    fallbackLng: 'en',
    debug: true,
    interpolation: {
      escapeValue: false, 
    }
  });


export default i18n;

ثم قم باستيراد ذلك في index.js:

import React, { Component } from "react";
import ReactDOM from "react-dom";
import App from './App';


import './i18n';

ReactDOM.render(
  <App />,
  document.getElementById("root")
);

قم بإنشاء ملف جديد public / locales / <language_code> /translation.json مع نموذج المحتوى التالي مثلا سيكون هناك في public / locales / en /translation.json

{
  "title": "Welcome",
}

و في public / locales / ar /translation.json

{
  "title": "مرحبا",
}

ثم بكل سهولة يمكنك استعمال الترجمة كالتالي

import React, { Suspense } from 'react';
import { useTranslation } from 'react-i18next';

function MyComponent() {
  const { t, i18n } = useTranslation();

  return <h1>{t('title')}</h1>
}


export default function App() {
  return (
    <Suspense fallback="loading">
      <MyComponent />
    </Suspense>
  );
}