反應路由器轉換總是會創建處理程序

Question

我剛開始，所以我不知道這是期望的行爲還是我錯過了某些東西。我使用的是Flux架構（特別是Reflux，但這不應該是相關的）。在我的超級簡單測試應用程序中：

var App = React.createClass({ 
    render: function() { 
     return (
      <div className="container"> 
       <Header /> 
       <RouteHandler /> 
      <div> 
     ); 
    } 
}); 

var routes = (
    <Route name="app" path="/" handler={App}> 
     <Route name="employees" handler={Employees}/> 
     <Route name="company" handler={Company}/> 
     <Route name="timesheets" handler={Timesheets}/> 
     <DefaultRoute handler={Company} /> 
    </Route> 
); 

Router.run(routes, function (Handler) { 
    React.render(<Handler/>, document.getElementById('main')); 
}); 

處理程序是React組件，最簡單的設置。當應用程序啓動時，我按預期登錄「公司」頁面。然後，當我轉換到「員工」時，一切都很好，但當我轉換回「公司」時，我發現創建了一個全新的{公司}組件，因此吹掉了我的狀態。這會導致很多不必要的API調用，除非我做錯了或不理解。

有沒有辦法告訴路由使用現有的處理程序，如果存在，只是重新渲染它？而不是創建一個新班級？

Answer 1

保持通量存儲中的狀態

對您而言，一種解決方案是將狀態保持在磁通存儲中。當組件被安裝時，請求getInitialState()功能中的商店數據。

保持在一個父組件的狀態

如果你不想使用助焊劑店（因爲它增加了你的簡單例子的複雜性），我建議保持在一個父組件的狀態，並通過它把你當作道具。

當然，這隻有在父組件未卸載時纔有效。我相信你的例子中的根組件<Handler />應該在你的例子中的狀態轉換之間保持安裝。

我建議你看看this tutorial，它會回顧如何將道具傳遞給子組件。

This教程繼續瞭解如何與孩子溝通。