React Router V4：如何在同一个屏幕中渲染一个模式，只更改 url，然后使用该 url，能够重建整个屏幕

Question

我正在尝试构建一个模态，其行为类似于用于显示特定推文的模态。

1. 在该屏幕截图中，您可以看到，无论何时打开模态，都会在原始 url 后附加一个状态代码，但我仍停留在同一屏幕上。
2. 然后，如果获取该 url 并将其粘贴到浏览器的地址栏中，我会在后台加载相同的内容，并且模式打开，就像我复制 url 时一样。

react-router 文档让我了解了第一部分，即在同一屏幕中加载模式。

这是 codeandbox 中的 react-router 示例

问题是我不知道该怎么做才能让用户在显示模式时将其创建的 url 加入书签（在示例中/gallery/img/1）

然后基于该 url 能够在后台加载具有相同组件（图库组件）的页面并打开模态。

PS 在codeandbox 的例子中，我故意省略了ModalSwitch 组件中的一些路由。

Answer 1

也许您可以创建两条路径，gallery 和 gallery/img/:id，它们指向同一个 gallery 组件。然后，在图库组件的 componentWillMount 期间，您可以检查 URL 是否包含 id 参数，并决定渲染模式以及要加载的图像。

然后，您可以为 UR 添加书签，可能会完全删除 ModalSwitch 组件，并且还允许在关闭模式时将用户重定向回图库路径，从而始终保持 URL 准确。