Как правильно локализировать react приложение используя react-router 4 и react-intl?

Question

[Sergey Filnor]

Добрый вечер.
Подскажите, в какую сторону копать - есть проект, который нужно локализировать.
Стек: React (16.4), React-router 4, Redux

Реализовать обычный перевод не составило труда. Библиотека react-intl достаточно простая в обычной реализации - но вот прикрутить к ней локализацию через роутер нормально не получилось.

Нужно реализовать локализацию которая будет инициализироваться при помощи переменной объявленной в url с адекватными редиректами.
Например, если человек заходит на сайт site.com, то его нужно кинуть сразу на адрес с переменной с языком
site.com -> site.com/ru.
site.com/contacts -> site.com/ru/contacts
Опять же можно сделать более умную реализацию, смотреть на локаль пользователя в навигаторе и если там есть совпадения с одной из наших локалей - то кидать его на ту версию.

Далее, ко всем роутам нужно прикручивать эту переменную и соответственно с ней подтягивать нужную локаль.
Я догадываюсь касательно реализации такого компонента роута - можно записать переменную в сторейдж редукса и просто подтягивать её в обертку над обычным роутом просто с приставкой локали в path.
Возможно есть другие варианты, но у меня на уме пока только такая реализация.

Но вот касательно редиректов, как корректно перенаправлять пользователя пока не могу понять.
В целом, буду признателен, если поделитесь какими-то решениями - как такую задачу решить.

Answer 1

[Антон Спирин]

Можно попробовать как-то так:

App:

<Switch>
  <Route path="/(en|ru|de|es|it|jp)" component={Routes} />
  <Redirect to={`/${currentLocale.code}${location.pathname}`} />
</Switch>

Routes:

<Switch>
  <Route exact path={match.path} component={Main} />
  <Route path={`${match.path}/other`} component={Other} />
  <Redirect to={match.url} />
</Switch>

Comments

[Sergey Filnor]

Нашел этот же вариант - борюсь с багом что при первой загрузке не рендерится основной компонент.
Сейчас захожу на localhost:3000 меня перенаправляет на localhost:3000/en как и задумано (в url это отображается), но сам компонент при этом не перерендеривается...

В чем может быть дело?

[Антон Спирин]

Sergey Filnor, тут без кода и не скажешь.
Вот рабочий пример.

[Sergey Filnor]

Антон Спирин, Помогла переразбивка компонента. После того как разбил один большой компонент с роутером, интлом и настройкой локализации на три маленьких - все заработало)