javascript - React.js 带 react 路由器 : Should my components 'react' to the changes in url or vice versa?

Question

我的问题更多是关于与我的应用的路由以及随后呈现的组件相关的高级设计决策。

我的应用有多个“页面”/“部分”。导航到这些部分可以简单地使用基本路由来处理。这些部分之一是“lookbook”，并且有一个类似于 Instagram 的照片源(路径是“/lookbook”)。如果我要单击此 photofeed 中的照片，我希望出现一个模式，其中包含带有一些额外数据的扩展照片。

我的问题归结为提要中其中一张照片的 onClick 事件应该发生什么。 (这个非常具体的功能是我的问题的来源，因为我相信它将决定我应该如何设计组件的行为方式。)

在 onClick 事件中，是否更有意义:

A) 只需导航到一条路线，例如“/lookbook/photoId”。然后让父 Lookbook 组件感知 URL 更改，然后只提供我想要的内容。

或

B) 更改 Lookbook 组件的状态，以在模式中展开点击的照片(无 URL 更改)。

Answer 1

这个问题的答案几乎完全取决于你喜欢如何思考这个问题。

A有一定的优势。它更干净，可能更容易编码，将是我的第一选择。每张照片都会根据 ID 将您定向到不同的 URL，并且一个单独的组件会完全满足它。

另一方面，B 会使您的 photoID 成为父组件(索引页面)状态的一部分。根据此状态，您可以创建模态。这会使您的组件比 A 稍微复杂一些，但在这里，您只有一个组件完成整个工作，并且组件之间的职责分工很明确。

任何一种方式都是绝对正确的，这取决于您如何看待您的组件以及每个组件所服务的目标。