localizing <Link> (react-router-dom)

[mehmetnyarar]

Hi,

I'd like to provide links in the translation but they shouldn't reload the page.

Ways I have tried so far:

1. "goto.homepage": "Go to <Link to='/home'>home page</Link>..."

Translates but it's not clickable.

2. "goto.homepage": "Go to ${link}..."

Inside component:

<p>
  {translate('goto.homepage', {
    link: <Link to='/home'>home page</Link>
  })}
</p>

Returns [object Object]

[ryandrewjohnson]

The issue here is <Link/> is not a valid HTML element, but a React element. The library does not currently support Rect elements included in translations, as it is outside the scope of this library.

I'm going to close this issue as it's a duplicate of #46. Please feel free to continue the conversation in that issue.

[ryandrewjohnson]

@mehmetnyarar In the meantime, although not ideal I'd just split your translation strings:

{
  "goto.homepage.prefix" "Go to",
  "goto.homepage.label" "home page",
  "goto.homepage.suffix" "copy that goes after link goes here."
}

// then in your react component
<p>{ translate('goto.homepage.prefix') } <Link to='/home'>{translate('goto.homepage.label')}</Link> { translate('goto.homepage.suffix') }</p>

[mehmetnyarar]

@ryandrewjohnson thanks for your time. Unfortunately that approach won't work for me since the structure of the sentence changes between languages (en, ru, tr).

I've created a child component which is basically a switch statement and returns JSX based on active language. For now it works for 3 languages but the solution won't scale once you have many languages or many components needing inline links .