I have a problem with I18next. I can't figure out how to make links to websites work, here is my code:
import React, { Suspense } from "react";
import i18n from "i18next";
import { initReactI18next, useTranslation, Trans } from "react-i18next";
const translationSwe = {
about: "Information",
example: "Exempel <br> <strong>text</strong>, här är <a target='_blank' rel='noreferrer
noopener' href='https://youtube.com'>länk</a>"
}
const translationEng = {
about: "About"
example: "Example <br> <strong>text</strong>, here is <a target='_blank' rel='noreferrer
noopener' href='https://youtube.com'>link</a>"
}
i18n.use(initReactI18next).init({
resources: {
swe: { translation: translationSwe },
eng: { translation: translationEng },
},
lng: "swe",
fallbackLng: "swe",
interpolation: { escapeValue: false },
});
const App = () => {
const { t } = useTranslation();
return(
<Suspense fallback="Loading..">
<div className="app">
<p><Trans i18nkey="example"/></p>
</div>
</Suspense>
);
};
Line breaks & strong tags work fine, but link doesn't. Instead of the link it prints just
<a>länk</a>
I have read some articles how to make links work, but in everyone of them data is in seperate JSON files. And in everyone of them you have to also insert the link from where you are calling the Trans component. I would like to just add text(which includes links etc) to translationSwe & translationEng without having to edit Trans component at all later, in case I decide to update or add links. How can I achieve this?
You can use dangerouslySetInnerHTML for your translation container (p).
This variant works if you use "t" function
I hope my solution will help you
You can use ReactHtmlParser for this issue.
It parses string as HTML tag. Slices and turns it to any tag.
import ReactHtmlParser from 'react-html-parser';
//Initialize
const string_html = "Exempel <br> <strong>text</strong>, här är <a target='_blank' rel='noreferrer
noopener' href='https://youtube.com'>länk</a>"
//When render
<> {ReactHtmlParser(string_html)} </>
Use Linkify Package
https://www.npmjs.com/package/react-linkify
Installation:
yarn add react-linkify
or
npm install react-linkify --save
Usage:
import Linkify from 'react-linkify';
React.render(
<Linkify>Examples are available at tasti.github.io/react-linkify/.</Linkify>,
document.body
);