Multilanguage support in react router

Question

I'm building multilingual site where the language preference is part of the URL, e.g.

http://example.com/<somepage>      (Russian, default)
http://example.com/en/<somepage>   (English)
http://example.com/jp/<somepage>   (Japanese)
http://example.com/../             (etc)

Everything is ok, when I use prefix for all languages:

<Route path="/:lang">
  <Route path="somepage" component={Somepage}/>
</Route>

But for default language, I don't need to include language in url, as shown in example. In fluxible router it can be solved by using regexp in path:

path: '/:lang([a-z]{2})?/<somepage>'

But it doesn't work in react router, because path must be a string, not a regexp. Any ideas how to handle this use case?

Answer 1

Have you tried duplicating your routes? Seems to work for me thus far.

var innerRoutes = (
  <Route>
    <Route path="somepage" component={Somepage}/>
    <Route path="otherpage" component={Otherpage}/>
  </Route>
);

var routes = (
  <Route path="/" component={App}>
    {innerRoutes}
    <Route path=":lang">
      {innerRoutes}
    </Route>
  </Route>
);