react-routerルートパスの翻訳方法

Question

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

すべてのルートを翻訳する必要があります。

// routes.js 

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

：私のような何かをするよりも、必要

• it/termini
• en/terms

：たとえば、私は、用語と条件パスに持っているページ（ロケールごとに1つ）持っています

このファンキーなソリューションは、アプリケーションのスケーラビリティにはあまり適していません。

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 (
     <Router 
      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/profilo/:userId" : "en/profile/:userId" 
//... 
} 

あなたはまた、前にその場でそれらを組み立てることができますルートが定義され、対応する変換キーに関連付けられます。このようにして

はそれは/末端があなたの翻訳されたURLのちょうどキーになり、あなたも用語-ページのURLのような基本的なURLに似ていないものを使用することができます。

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