12

我的应用程序有多个语言环境（it、en）。

我需要翻译所有路线。例如，我有具有路径的条款和条件页面（每个语言环境一个）：

  • it/termini
  • en/terms

我需要做的不是这样的事情：

// routes.js

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

正如您所看到的，这个时髦的解决方案对于应用程序的可伸缩性并不是那么好。

4

1 回答 1

6

我目前处理路线本地化的方法是像处理任何本地化内容一样处理它们。在你的情况下，我会这样做：

// 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>
)

然后您可以在翻译文件中指定它们，就像任何其他字符串一样，包括任何参数：

// en.js

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

您还可以在定义路线之前即时组装它们，将它们与相应的翻译键相关联。

这样it/termini就变成了你翻译后的 URL 的键，你也可以使用一些与底层 URL 不相似的东西，比如terms-page-url。

此方法还允许您区分每种语言的路由组件和/或子路由，这是一个额外的好处。只需在映射函数中实现逻辑（或在适合您的应用程序的地方）。

于 2016-08-23T08:44:29.510 回答