推荐使用redux和react-router进行深度链接的方法

Recommended approach to deep linking using redux and react-router

本文关键字：深度 链接 方法 react-router redux      更新时间：2023-09-26

我正在使用React (15.3.0)， Redux(3.5.2)和React -router(2.6.1)构建一个web应用程序。我包含了一些版本，因为我看到了一些相关的帖子，但他们引用了这些库的旧版本。

我有一些状态，我想在URL上持久化，以便用户可以深度链接到它。通过深度链接，我的意思是用户可以直接链接到页面的某个状态。我的应用程序中有各种页面，每个页面都有一个单独的reducer，每个页面的状态应该在页面之间保持。

我读过Dan Abramov推荐的方法:如何同步Redux状态和url哈希标签参数除了在页面之间持久化状态之外，这看起来还可以。

示例场景:

  1. 用户到达第一页:/page1

  2. 用户与页面交互，导致状态保存在URL: /page1?state={...}

  3. 用户转到第二页:/page2

  4. 用户与页面2的交互:/page2?state={...}

  5. 用户链接到第1页，希望在离开时看到该页。问题!我们如何从第一页恢复状态?

我看过react-router-redux，但是我不知道它是否做了我需要它做的事情。

这个问题有一个共同的方法吗?如果有，是什么?如果没有，你能建议一个方法吗?

我相信这个问题的答案不止一个;你只需要选择一个并实现它。

如果是我，我会这样做:

  1. 使用redux存储作为状态
    2. 的唯一真实来源
  2. 以某种方式订阅存储(可能是redux中间件)，并在page1的相关状态发生变化时更新url参数
  3. 如果用户访问/page1，使用存储状态(我假设状态需要同步到服务器才能存储/恢复它)。
  4. 如果用户访问/page1?state={...}, a)将URL状态合并到存储/恢复状态或b)跳过恢复直接使用URL。

我甚至会更进一步，不同步状态到url，因为这似乎是浪费精力(除非用户依赖于书签页面)。只需渲染一个React组件，说"共享这个URL"，并让它渲染一个URL与适当的查询参数。

相关文章：