React-i18next - HTML <a>сохранение href привязки

Question

Я вынужден использовать следующий ключ:

"key": "Some Text <u><a href=https://www.example.com/>Read more</a></u>"

Можно ли использовать приведенное выше в компоненте <Trans> React-i18next, поэтому атрибут href будет используемый? Вот что у меня есть на данный момент:

i18next config:

.init({
  react: {
    transSupportBasicHtmlNodes: true,
    transKeepBasicHtmlNodesFor: ['u', 'a']
  }
})

компонент:

<Trans i18nKey="key">
 Text <u><a to='link'>link</a></u>
</Trans>

или

<Trans i18nKey="key">
 Text <u><a to={t('link')}>link</a></u>
</Trans>

Отсутствует вывод Атрибут href в теге привязки:

"Some Text <u><a>Read more</a></u>"

Answer 1

Вам нужно будет использовать интерполяцию при определении значения ключа, потому что transKeepBasicHtmlNodesFor не сохраняет атрибуты.

Проверьте эту ссылку для получения дополнительных сведений

transKeepBasicHtmlNodesFor позволяет элементам не иметь дополнительных атрибутов, таких как className и только без дочерних элементов (void) или одного дочернего текстового элемента:

• <br/>
• <strong>bold</strong>
• <p>some paragraph</p>

но не:

• <i className="icon-gear" /> // без атрибутов
• <strong title="something">bold something</strong> // без атрибута
• <bold>bold<i>italic</i></b> // без внутренних элементов - только строки!

В вашем случае вы должны использовать ключ

"key": "Some Text <1><0>Read more</0></1>"

и использовать его с Trans как

<Trans i18nKey="key">
 Text <u><a href="href=https://www.example.com/">link</a></u>
</Trans>

Не забывайте использовать атрибут href, а не to в anchor tag

Проверить Как получить правильную строку перевода? для записи правильная строка перевода

Answer 2

Измените prop на href prop. Вы используете тег привязки html и не реагируете на маршрутизатор dom Link.

<Trans i18nKey="key">
 Text <u><a href={t('link')}>link</a></u>
</Trans>