I have a translation json file with the following translation:

"pageNotFound": {
  "description": "The page could not be found. Click {{link}} to return to the home page"
},

The link variable I am wanting to be replaced by a ReactRouter <Link>

I have the following code in my render method which outputs the below picture.

public render() {

  const { t } = this.props;
  const message = t('pageNotFound.description', { link: <Link to="/">here</Link> });

  return (
    <div className="body-content">
      <div>
        {message}
      </div>
    </div>
  );
}

I have played with the <Trans> ponent and I think this may be a way but it seems like you have to type the full text including <> tags which for my use case is not what i'm after as I want all text to be in the translation json if possible.

Any remendations are wele

I have a translation json file with the following translation:

"pageNotFound": {
  "description": "The page could not be found. Click {{link}} to return to the home page"
},

The link variable I am wanting to be replaced by a ReactRouter <Link>

I have the following code in my render method which outputs the below picture.

public render() {

  const { t } = this.props;
  const message = t('pageNotFound.description', { link: <Link to="/">here</Link> });

  return (
    <div className="body-content">
      <div>
        {message}
      </div>
    </div>
  );
}

I have played with the <Trans> ponent and I think this may be a way but it seems like you have to type the full text including <> tags which for my use case is not what i'm after as I want all text to be in the translation json if possible.

Any remendations are wele

• javascript
• reactjs
• typescript
• internationalization
• i18next

1 Answer 1

You should use Trans ponent for this.

"pageNotFound": {
  "description": "The page could not be found. Click <0>here</0> to return to the home page"
},

public render() {
  const { t } = this.props;

  return (
    <div className="body-content">
      <div>
        <Trans
          t={t}
          i18nKey="pageNotFound.description"
          ponents={[
            <Link key={0} to="/">
              here
            </Link>,
          ]}
        />
      </div>
    </div>
  );
}