不能做依賴React路由器的多語言網站

我正在嘗試使用React製作多語言SPA並依賴React-Router。不能做依賴React路由器的多語言網站

這裏是入口文件的簡化版本：

// define the routes for each language .. 
const InnerRoutes = (
    <Route> 
     <IndexRoute page="home" component={InnerPage}></IndexRoute> 
     <Route path="(:page)" component={InnerPage}></Route> 
    </Route> 
); 

// define the routes for all the languages, using InnerRoutes .. 
const AllRoutes = (
    <Router history={browserHistory}> 
     <Route path='/' component={App} language="bg"> 
      {InnerRoutes} 
      <Route path="en" language="en"> 
       {InnerRoutes} 
      </Route> 
     </Route> 
    </Router> 
); 

// and render our app .. 
ReactDOM.render(
    AllRoutes, 
    document.getElementById('app') 
);

所以，我有App頂級組件和InnerPage組件。

的問題是：

當導航發生了變化 - InnerPage更新和（最終）重新呈現。

內部InnerPage：

我有經由page屬性訪問所請求的頁面。

不幸的是 - 我無權訪問language屬性。

這就是爲什麼InnerPage不能從終點拉數據 - 它知道page，但不是language。

來源

2016-11-09 pesho hristov

路由器將routes prop傳遞給所有路由組件，這是匹配路由的集合。例如，在/上，它看起來像這樣：[{ path: '/', language: 'bg'}, { }, { page: 'home' }]。

所以，這取決於你想如何處理有沒有或由不同匹配的路由宣告多國語言的情況下，你可以做這樣的事情：

const lang = this.props.routes.reduce((lang, route) => { 
    return route.language || lang; 
}, defaultLang);

這將優先考慮由內部提供的語言路線。

看你的路由配置，有兩件事我應該提到：

在你InnerRoutes，頁面值<IndexRoute page="home" ... />和<Route path="(:page)" ... />暴露不同。前者是路線上的道具（如language），可通過this.props.route.page訪問，而後者是URL參數（this.props.params.page）。
英語<IndexRoute>無法訪問，因爲保加利亞:page路線來之前和匹配以及。你可以通過移動英文路線來解決這個問題。

這裏有一個jsbin證明我所說的幾點：http://jsbin.com/siqake/5/edit?js,output

來源

2016-11-09 17:21:46

好，事情是與安裝我描述 - 我在'App'組件'language'，但不是在'InnerPage'之一。而關於'page'參數 - 反之亦然。所以 - 我怎麼能有 - 至少在'InnerPage'組件中。 ...........（可能路線設置是錯誤的......） –

也許我誤解了你，但是那不是什麼'路線'道具解決？你可以在你的所有路由組件（'App'，'InnerPage'）中得到相同的匹配路由數組，包括它們的屬性（'page'，'language'）。 –

我看到你的評論後去了'routes'屬性，但它也沒有用。即使我循環「路線」並檢查東西 - 語言也會丟失。 ......我開了一個關於它的問題 - https://github.com/ReactTraining/react-router/issues/4176。 –

不能做依賴React路由器的多語言網站

回答

相關問題