跨不同路线重用反应组件

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' 组件被 'create-adr' 路由和 'manage-adr' 路由使用。

问题是我们有一个使用 react-bootstrap 实现的下拉组件。

当用户在编辑页面中并且用户现在选择创建页面时，页面未被 t运行sitioning。编辑页面就在那里。单击 'create' 下拉菜单时，我们执行 this.history.pushState(null, '/create-adr')。

我们如何解决这个问题？

Answer 1

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

或者将您的 ManageADRTermPage 组件更改为 EditADRTerm，并让 CreateADRTermPage 和 ManageADRTermPage 成为它的简单包装器。

跨不同路线重用反应组件

Re-using a react component across different routes

react-router