跨不同路線重複使用反應組件

Question

我們遇到了編輯頁面和創建頁面共享相同組件的情況。路由器如下所示。

<Route path="/" component={AdrApp}> 
      <IndexRoute component={ManageDrugPage}/> 
      <Route path="cdicms-adr-ui" component={HomePage}/> 
      <Route path="create-adr" component={ManageADRTermPage}/> 
      <Route path="manage-adr/:id" component={ManageADRTermPage}/> 

正如我們所看到的「ManageADRTermPage」組件上面所使用的「創建-ADR」路線和「管理-ADR」路線。

問題是我們有一個使用react-bootstrap實現的下拉組件。

當用戶在編輯頁面中，並且用戶現在選擇創建頁面時，頁面不在轉換。編輯頁面保持在那裏。我們在單擊「創建」下拉菜單時執行this.history.pushState（null，'/ create-adr'）。

我們該如何解決這個問題？

Answer 1

簡單的解決方法是獲得一個簡單的CreateADRTermPage組件，這是您的ManageADRTermPage的包裝。

或者將您的ManageADRTermPage組件更改爲EditADRTerm，並將CreateADRTermPage和ManageADRTermPage都變成簡單的包裝。