在不同路线上重复使用反应组件

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}/>

正如我们在上面看到的那样，＆＃39; ManageADRTermPage＆＃39;组件由＆＃39; create-adr＆＃39;路线和＆＃39; manage-adr＆＃39;路由。

问题在于我们使用react-bootstrap实现了一个下拉组件。

当用户在编辑页面中并且用户现在选择创建页面时，页面未转换。编辑页面就在那里。当＆＃39;创建＆＃39;时，我们执行this.history.pushState（null，＆＃39; / create-adr＆＃39;）点击下拉列表。

我们如何解决这个问题？

Answer 1

简单的解决方法是使用一个简单的CreateADRTermPage组件，它是ManageADRTermPage的包装器。

或者将ManageADRTermPage组件更改为EditADRTerm，并将CreateADRTermPage和ManageADRTermPage都设置为它的简单包装。