如何在不同的路径中打开语义 - ui-react模式？

Question

我正在使用Semantic UI React和React Router。我想要实现的是，当用户打开模态时，地址应显示与模态对应的路径，例如，当用户打开文章模态时，路径应为www.example.com/article。

我怎样才能做到这一点？

Answer 1

语义-ui-react中的模态有一个布尔open道具。一旦你定义了这个道具，你就会覆盖Modal组件开箱即用的内部状态。

您需要自己控制组件的打开状态才能实现此目的。您需要从路径中获取一个参数，指定模态是否打开。如果存在该参数，则可以将模态设置为打开。如果它不存在，您可以将其设置为关闭。

您还需要处理模态的关闭，因为它不再是Modal组件的内部。可能最简单的方法是在关闭按钮上设置onClick事件，将路由器历史记录推送到上一步。或者如果你想去其他地方，你可以去其他地方。

您可以在closeIcon道具上传入一个节点（不仅仅是一个字符串），您可以实际定义自己的按钮和执行路由器推送的点击事件。