12

アプリケーションに複数のロケール (it、en) があります。

すべてのルートを翻訳する必要があります。たとえば、パス (ロケールごとに 1 つ) を持つ利用規約ページがあります。

  • 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 の単なるキーになります。terms-page-url のように、基になる URL に似ていないものを使用することもできます。

この方法では、言語ごとにルート コンポーネントやサブルートを区別することもできます。これは追加のボーナスです。マッピング関数内 (またはアプリケーションに適した場所) にロジックを実装するだけです。

于 2016-08-23T08:44:29.510 に答える