How to set and handle language in react-router from?

Question

I have been trying to resolve this all day and finally i come to you all.

The task is simple, I need to set language type in the URL, so it looks something like this: domain.com/{langVar}/other/paths

And be able to change it by clicking/selecting language in my apps header or any other component.

Important: the language variable should always remain in the URL.

I am using "react-router": "^2.7.0", "react": "^15.3.1".

This is how my router config looks like:

export default (
  <Router history={browserHistory}>
    <Route path="/:lang" component={MainApp}>
      <IndexRoute component={Home} />
      <Route component={OtherPage} />
    </Route>
    <Route path='*' component={NotFound} />
  </Router>
);

I hope this makes, sense if not i will update my question. But to me this seems a pretty normal use case of sites URL.

Thank you

Answer 1

Extending this stack overflow question, I added a function called userRedirect which will be triggered when the matching route isn't found. Note - the / following argument :lang in <Route path=":lang/" > is very important due to which our route * gets hit (as explained in the stack overflow link shared above.

import React from 'react';
import { Route } from 'react-router';
import { App, About } from './containers';

function userRedirect(nextState, replace) {
  var defaultLanguage = 'en-gb';
  var redirectPath = defaultLanguage + nextState.location.pathname
  replace({
    pathname: redirectPath,
  })
};

<Route path="/" component={App}>
  <Route path=":lang/" >
    <Route path="about">
      <Route path="show" component={About}/>
    </Route>
  </Route>
  <Route path="*" onEnter={userRedirect} />
</Route>

If you navigate to the url <domain>/about/show, it will be redirected to <domain>/en-gb/about/show. Hope this is what you were looking for.

Answer 2

this answer is almost nice

 function userRedirect(nextState, replace) {
  var defaultLanguage = 'en-gb';
  var redirectPath = defaultLanguage + nextState.location.pathname
  replace({
    pathname: redirectPath,
  })
};

<Route path="/" component={App}>
  <Route path=":lang/" >
    <Route path="about">
      <Route path="show" component={About}/>
    </Route>
  </Route>
  <Route path="*" onEnter={userRedirect} />
</Route>

but for me it wasnt good. Since first of all it should be

    var redirectPath = defaultLanguage + '/' + nextState.location.pathname

links i think should be added not just like "/link-to-page" but "en/link-to-page" because function "userRedirect" is always fired. Every time you click the link. And because of this your url is to become "...en/en/en/en/link-to-page"