How to properly localize a react application using react-router 4 and react-intl?

Question

React

Good evening.
Tell me which way to dig - there is a project that needs to be localized.
Stack: React (16.4), React-router 4, Redux
It was not difficult to implement the usual translation. The react-intl library is quite simple in the usual implementation - but it didn’t work out well to attach localization to it through the router.
It is necessary to implement localization that will be initialized using a variable declared in url with adequate redirects.
For example, if a person visits the site site.com, then he must be sent immediately to the address with a variable with the language
site.com -> site.com/ru.
site.com/contacts -> site.com/en/contacts
Again, we can make a smarter implementation, look at the user's locale in the navigator, and if there are matches with one of our locales, then throw it on that version.
Further, you need to fasten this variable to all routes and, accordingly, pull up the desired locale with it.
I guess about the implementation of such a route component - you can write a variable to the redux store and simply pull it into a wrapper over a regular route simply with the locale prefix in path.
Perhaps there are other options, but I have only such an implementation in my mind so far.
But regarding redirects, I still can’t figure out how to correctly redirect the user.
In general, I would be grateful if you share some solutions - how to solve such a problem.

Answer 1

You can try something like this:
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>