Question

我的应用程序有多个区域设置（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>
)

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

Answer 1

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

// 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 成为您翻译过的网址的关键，您还可以使用与 terms-page-url 等基本网址不相似的内容。< / p>

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

如何翻译react-router路由路径

1 个答案: