带有 react-router 的 React.js：我的组件是不是应该对 url 的更改做出“反应”，反之亦然？

Posted 2023-02-22

【中文标题】带有 react-router 的 React.js：我的组件是不是应该对 url 的更改做出“反应”，反之亦然？

【英文标题】：React.js w/ react-router: Should my components 'react' to the changes in url or vice versa?带有 react-router 的 React.js：我的组件是否应该对 url 的更改做出“反应”，反之亦然？

【发布时间】：2017-04-20 05:37:21

【问题描述】：

我的问题更多的是关于我的应用程序路由的高级设计决策，以及被渲染的后续组件。

我的应用有多个“页面”/“部分”。导航到这些部分可以通过基本路由简单地处理。其中一个部分是“lookbook”，并且有一个类似于 Instagram 的照片源（路线是“/lookbook”）。如果我要单击此照片供稿中的照片，我希望显示带有扩展照片的模式，并带有一些额外的数据。

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

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

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

或

B) 更改 Lookbook 组件的状态，以在模式内扩展点击的照片（无 URL 更改）。

【问题讨论】：

我几乎肯定会为模态选择 B，尽管这可能只是个人喜好.. 我不能说它在客观上是正确的

我会说A有它的优势。您正在将 URL 状态用于其他事情，因此继续使用该状态会更干净，并且它还提供了一种直接进入该状态的方法。如果它是组件状态，那么您无法直接导航到以模式打开的照片，这可能是一个不错的用例

好点。我确实想实现可共享的 URL，所以 A 似乎朝那个方向发展。现在，如果我要走 A 路，路由应该是什么样的？我的嵌套路由（即“lookbook/photoId”）会渲染父 Lookbook 组件，然后它会感知到 url 有一个嵌套的 id，还是我的嵌套路由会渲染 Lookbook.js 的更深的子组件，例如 PhotoModal.js例子？

【参考方案1】：

这个问题的答案几乎完全取决于你对这个问题的看法。

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

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

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

【讨论】：

我认为这个答案解决了我的顾虑。您根据具体情况解释两者如何以及为什么都有效。

【参考方案2】：

考虑到反应，您应该将回调函数传递给您的提要组件，并在单击提要图像时使用回调函数更改回溯组件的状态。这是 react 方法，现在完全取决于您是状态更改表示 URL 更改还是模态状态更改。

【讨论】：

您回答的最后一部分，您是说我可以触发 URL 的更改然后触发状态更改，还是说我触发状态更改然后触发更改在网址中？

React 完全基于状态，它与 url 变化无关，你做任何事情都不会考虑 url 变化。

Vaibhav，是的，我明白了。但是，如果我想实现可共享的 URL，以便在社交媒体上共享，我的组件不应该是 URL 驱动的吗？ （URL 决定状态）。

哦，我的错，是的，如果有什么是 url 驱动的，那么可以做的是，对于每个提要存储其详细信息，例如状态中的 url 等。状态对象中的任何内容都会在浏览器中显示。