How to translate react-router Route paths

Question

My application has more than one locale (it, en).

I need to translate all the routes. For example I have the terms and condition page that has to paths (one per locale):

it/termini
en/terms

I need than to do something like:

// routes.js

const routes = (
  <Route path="/" component={App}>
    <IndexRoute component={HomePage} />
    <Route path="(it/termini)(en/terms)" component={TermsPage} />
    <Route path="*" component={NotFoundPage} />
  </Route>
)

As you can see this funky solution is not so good for the scalability of the application.

score 5 · Answer 1 · edited Mar 25 '18 at 05:17

My current approach with routes localization is to deal with them as I do with any localized content. In your case I would do:

// routes.js

function createRoutes(language) {
   /*
     You'll probably have more work to do here, 
     such as sub-routes initialization
     component's type selection logic, etc.

     @note: _t(key, language) is your 
            translation function
   */

   return (
       <Route 
          key={language} 
          path={_t("it/termini", language)} 
          component={TermsPage} 
       />
   )
}

let localizedRoutes = supportedLanguages.map(createRoutes)

const routes = (
  <Route path="/" component={App}>
    <IndexRoute component={HomePage} />
    {localizedRoutes}
    <Route path="*" component={NotFoundPage} />
  </Route>
)

Then you can specify them in your translation files just as any other string, including any parameter:

// en.js

module.exports = {
//...
  "it/termini" : "en/terms",
  "it/profilo/:userId" : "en/profile/:userId"
//...
}

You can also assemble them on the fly before your routes are defined, associating them to the corresponding translation key.

In this way it/termini becomes just the key of your translated URL, you could also use something not resembling the underlying URL like terms-page-url.

This method also allows you to differentiate route components and/or sub routes per language, which is an added bonus. Just implement the logic inside your mapping function (or where it's appropriate for your application).

How to translate react-router Route paths

1 Answers1