在 React 组件之间切换，在状态与 React 路由器之间切换答案

【问题标题】：Toggling between React Components toggling with state vs React Router在 React 组件之间切换，在状态与 React 路由器之间切换
【发布时间】：2019-12-07 04:13:09
【问题描述】：

当我单击 buttonLink 时，我试图用 buttonLink 和列表元素切换页面。我基本上可以看到两种流行的可能方法：

使用 react router and create routes 一个用于列表按钮，另一个用于单击列表按钮元素时打开的列表元素，该元素将列表元素作为路由器中的道具
将道具传递给列表元素，但将其呈现在同一页面中，但带有状态切换条件。示例 -

this.state.showList===true ? ：

在这里，我在这两种方法之间做出选择感到困惑。我最好选择第二种方法来根据状态在组件之间切换，因为我对路由器不太满意。但是如果该页面中的组件数量增加，则很难使用状态值对其进行维护。

但我想知道中等规模应用程序的标准方法。

任何示例或指针都会有所帮助，谢谢。

【问题讨论】：

标签： reactjs react-router react-router-v4 react-component react-state-management

【解决方案1】：

在我看来，请选择react-router。路线用于应用程序的多个区域。如果在很多地方使用条件渲染的逻辑，它可能会引入太多的复杂性。仅采用路由器的声明性方法而不使用其背后的逻辑会更容易。

【讨论】：

感谢您的回复。这很直接，很有帮助
没问题，很高兴它有帮助。

【解决方案2】：

我同时使用这两种方法，并区分封装的业务逻辑和修改逻辑。例如，您有人员以及这些人之间的关系。所以我有两条路线<personId>/details 和<personId>/relations。第一个您将看到姓名、地址、电话号码等人员详细信息，第二个您将看到与此人有联系的相关人员网络。对我来说，我在重新加载页面后（按 F5 键）后期望看到的内容来决定这两种方法。当我在详细信息页面上时，我想再次查看详细信息，并且还想再次查看关系网络。

但是有一些修改逻辑，比如添加一个新的新电话号码。通常，您可以通过显示模式对话框或使用一些输入和“确定”/“取消”扩展表单来执行此操作。当此对话框打开并重新加载页面时，我希望再次看到人员详细信息。所以我通过{this.state.showAddTelephone && ...}实现这个对话框

【讨论】：