Условный рендеринг в реаги для многоязычного приложения в реакции

Question

Я работаю над приложением реагирования, которое будет запущено для разных стран.В каждой стране некоторые компоненты будут одинаковыми, но другие будут разными.

т.е.

France will have
  - Component A
  - Component B
  - Component C

Germany will have
  - Component A
  - Component D

Итак, оба сайта имеют общие компоненты, но некоторые из них уникальны.

Мы используем глобальную переменную env, чтобы указать, какой сайт загружать.(en, fr и т. Д.)

Стоит отметить, что URL-адрес должен быть одинаковым для всех сайтов (указанная выше переменная должна указывать приложению, какой компонент отображать)

Что было бы лучшей идеей для обработки различий в этом компоненте?

Идеи, которые я придумал до сегодняшнего дня:

• Создайте один сайт на страну.(Большая проблема, так как слишком много СУХОГО. Существует много общих компонентов)
• Условный рендеринг (кажется хакерским, поскольку есть несколько стран, что приводит к бесконечным if else)
• Высокий порядоккомпонент, который возвращает все компоненты внутри родительского контейнера (чувствует себя хорошо, но я не хотел изобретать колесо и сначала хотел спросить здесь)

Есть ли пакет NPM, который поможет мнезаархивировать это?

Должен ли я начать с нуля?

Большое спасибо.

Answer 1

не уверен, что я понял (извините, если это так). Вам не нужно создавать два сайта. Вам просто нужно организовать контент сайта в проходной структуре (что-то вроде):

В файле с содержимым сайта:

const frenchData = [
  {
    idKey: 'aboutus',
    textTitel: aboutUsTextTitelFR,
    textField: aboutUsTextFieldFR
  }
];
const englishData = [
  {
    idKey: 'aboutus',
    textTitel: aboutUsTextTitelEN,
    textField: aboutUsTextFieldEN
  }
];


export const aboutusData = {
    'fr': frenchData,
    'en': englishData
}

Вы можете получить предпочитаемые языки (из браузера пользователя) со следующими строками.

static async getInitialProps({ req }) { const userAgent = req ? req.headers['accept-language'] : navigator.userAgent; return { userAgent }; }

После некоторого форматирования строки для результата userAgent вы получите массив предпочитаемых языков. После этого вам нужно отобразить передаваемые данные (DE, EN, ES, что угодно)