在状态切换与React Router之间切换的React组件之间

Question

当我单击buttonLink时，我试图切换带有buttonLink的页面并列出元素。我基本上可以看到2种流行的可能方法：

1. 使用反应路由器并创建路由，一个用于列表按钮，另一个用于在单击列表按钮元素时打开的列表元素，该列表按钮元素将列表元素作为路由器中的道具

2. 将道具传递到列表元素，但将其呈现在同一页面中，但具有状态切换条件。示例-

   this.state.showList === true吗？ ：

在这里，我很困惑地在这两种方法之间做出选择。我最好选择第二种方法来基于状态在组件之间进行切换，因为我不太喜欢Router。但是，如果该页面中的组件数增加，则很难使用状态值来维护它。

但是我想知道中型应用程序的标准方法。

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

Answer 1

我正在使用两种方法，并区分封装的业务逻辑和修改逻辑。例如，您拥有人与人之间的关系。因此，我有2条路线<personId>/details和<personId>/relations。在第一个中，您将看到人员详细信息，例如姓名，地址，电话号码；在第二个中，您将看到与该人相关联的相关人员网络。对我来说，我可以通过重新加载页面（按F5）后看到的两种方式来决定这两种方法。当我进入详细信息页面时，我想再次查看详细信息，也希望再次查看关系网络。

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

来实现此对话框

Answer 2

我认为只需使用react-router。路线在应用程序的多个区域中使用。如果在很多地方使用条件渲染的逻辑，可能会引入过多的复杂性。仅采用路由器的声明性方法而不使用任何逻辑会更容易。