添加分解反應路由器

Question

在反應的路由器，有任何方法從可以在Router.run函數內被拾取路徑清晰度傳遞特性？我想要針對特定​​路線啓動特定的操作。也許這樣的事情：

<Route handler={someComponent} resolve={someAction} /> 

在Router.Run我想要執行給定的行動在resolve中定義。有沒有辦法做到這一點？

之所以這樣做這是爲了確保每個途徑可以實例化服務電話（從定義的動作），以確保該商店有需要這條路線的數據。在組件中做這件事也是一種可能性，我們現在面臨的問題是，同一路由中的多個組件需要相同的數據，這使得它多次向API請求數據，並且還觸發了從這些調用中引入的每個結果的重新渲染。

Answer 1

你可以做這樣的事情在陣營路由器通過組件類添加static（使用createClass）或屬性（使用ES6類時），然後做出反應路由器執行它們。

var Component1 = React.createClass({ 
    statics: fetchData: function(params) { 
    return API.getData(params); 
    }, 

    // ... 
}); 

class Component2 extends React.Component { 
    // ... 
} 

Component2.fetchData = (params) => API.getData(params); 

然後，當你運行你的路由器，尋找有fetchData靜態方法，並調用它的所有匹配的路由。我們將在這裏假設fetchData（因此API.getData）返回一個承諾：（詳情請參閱this React Router example）

Router.run(routes, function(Root, state) { 
    var data = {}; 

    var routesWithFetchData = state.routes.filter(function (route) { 
    return route.handler.fetchData 
    }); 

    var allFetchDataPromises = routesWithFetchData.map(function (route) { 
    return route.handler.fetchData(state.params).then(function (routeData) { 
     data[route.name] = routeData; 
    }); 
    }); 

Promise.all(allFetchDataPromises).then(function() { 
    React.render(<Root data={data} />, container); 
    }); 
}); 

可以解決，確保「多個組件獲取相同的數據」的問題API模塊將捕獲相同數據的請求併爲其分配相同的承諾。僞代碼：

API = { 
    getData: function(params) { 
    if (requests[params]) { 
     return requests[params]; 
    } else { 
     request[params] = new Promise(function(resolve, reject) { 
     // fetch data here 
     }); 
    } 
    } 
};