回到使用数据呼叫路由

Question

我是非常新的反应路由器，所以我想知道下面的场景是否可能。

我有两条路。详细路线及列出路线。在Detail页面中，我有一个按钮"Add“，它应该打开列表路由，如果在该路由上选择了一些东西，我想要将它与用户选择的条目一起带回到Detail。

我知道，使用react路由器v6，我可以在列表路由中执行navigate(-1)来导航1页，但问题是无法返回所选的项(除非我使用存储)。另一种方法是使用实际传递所选项目的navigate('/detail-page', {state: {selectedItem}, replace:true)。但是，它也会破坏浏览器的历史记录，如果我从详细页面执行navigate(-1)，它不会将用户带回到最后一页，因为最后一页就是详细页。

Answer 1

这有点取决于你如何决定你想要返回导航工作。我认为你基本上有两个“思路”来实施。

1. 总是在细节和列表页面之间进行“转发”导航。

这里的想法是使用推送操作在两个页面之间导航。单击详细页面中的"Add“按钮将导航到列表页面，在”选择“时，再次导航到具有适当路由状态的详细页面。您将有效地维护“详细/列表”对的历史堆栈。

- PROS: Back navigations will be simple/trivial, the user will simply navigate back between all the detail/listing pages they visited.
- CONS: Any back navigations to previous details pages that had any route state will be lost, so this may not be ideal.

由于路由状态问题，返回到希望看到与以前相同的“状态”的页面的用户体验可能很差。本质上，您将拥有一个包含大量详细组件的历史堆栈，所有这些组件都没有以前的路由状态。您将有效地在历史堆栈的顶部维护一个“详细信息列表”页面。

1. 总是在细节和列表页面之间进行“重定向”导航。

使用REPLACE`‘操作在两个页面之间导航。

- PROS: Back navigations will still be simple/trivial, any back navigation action will navigate back to the page the user was on prior to starting on the detail page.
- CONS: There will be no "history" of the interactions between the detail and listing pages. Maybe this isn't ideal for what you want to track within the app.

这里的关键优点是，如果您将从详细页面向一个方向的推送和从列表页面的另一个方向的替换混合在一起，您将继续将详细信息页推到堆栈上。