带着数据返回呼叫路线

Question

我是反应路由器的新手，所以我想知道以下情况是否可能。

我有两条路线。详细路线和上市路线。在详细信息页面中，我有一个“添加”按钮，如果使用选择了我想将其与用户选择的项目一起带回详细信息路线的内容，则假设打开列表路线并在该路线上。

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

Answer 1

后退导航的工作方式由您决定。我认为您基本上有两个“思路”要实施。

1. 始终在详细信息页面和列表页面之间进行“前进”导航。

   这里的想法是使用 PUSH 动作在两个页面之间向前导航。从详细信息页面单击“添加”按钮将导航到列表页面，并在“选择”时再次导航到具有适当路由状态的详细信息页面。您将有效地维护“详细信息/列表”对的历史堆栈。

   • 优点：后退导航将简单/琐碎，用户只需在他们访问的所有详细信息/列表页面之间导航。
   • 缺点：任何返回到之前具有任何路线状态的详细信息页面的导航都将丢失，因此这可能并不理想。

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

2. 始终在详细信息页面和列表页面之间进行“重定向”导航。

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

   • 优点：后退导航仍然简单/琐碎，任何后退导航操作都将导航回用户在开始详细信息页面之前所在的页面。
   • 缺点：将没有详细信息和列表页面之间交互的“历史记录”。也许这对于您想要在应用中跟踪的内容并不理想。

这里的关键点是，如果您从详细信息页面向一个方向的 PUSH 和从列表页面的另一个方向的 REPLACE 混合，您将继续将详细信息页面推入堆栈。