如何翻譯react-router路徑路徑

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 (
     <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。

此方法還允許您區分每種語言的路線組件和/或子路線，這是額外的好處。只需在映射函數內部實現邏輯（或適用於您的應用程序的地方）。