在带有 react-router 的 React 中，当我从一个复杂的视图中导航出来，然后直接返回时，如何保留一个人的所有视图选择？

Posted 2023-02-18

【中文标题】在带有 react-router 的 React 中，当我从一个复杂的视图中导航出来，然后直接返回时，如何保留一个人的所有视图选择？

【英文标题】：In React with react-router, how can I keep all of a person's in-view choices when navigating away from a complex view, then directly back?

【发布时间】：2020-03-22 02:55:34

【问题描述】：

React 应用场景

我有 2 个视图，UserLister 和 UserViewer。两者都在不同的网址。 UserLister 是一个复杂的表（第三方使用 ag-Grid），具有字段、排序和过滤功能。 UserViewer 是一个极其复杂的视图，具有大量需要一段时间才能加载的功能。在查看单个用户后，我想让 返回 导航到 UserLister 变得非常高效且用户友好。我希望它显示与用户设置的所有相同的种类和相同的信息。

换一种说法：

我希望我（或任何人）在列表页面 1 上使用的更改在有人离开然后直接返回时可用。

实现这一点的惯用方式？

我怎样才能在反应中做到最好？是否有一些反应路由器的功能可以在这里应用？我宁愿不必管理 UserLister 用于手动排序/过滤/选择数据的不同状态的 ?100s?。

【问题讨论】：

听起来你需要使用全局状态，比如 redux。当您离开时组件被卸载，当您返回时它被重新渲染并重新安装。本地状态不会持续存在。一个全球性的国家会。

或者，您可以将用户的选择存储在 localStorage 或 cookie 或其他东西中......但这不是随着项目的发展而管理全局状态的可扩展方式。

【参考方案1】：

React-router 是管理浏览器历史的路由库。您需要另一个工具来保存和共享组件之间的状态。这个想法是让 UserLister 和 UserViewer 都可以存储和访问来自某种全局存储的信息。因此，每次用户输入特定的 Route 数据时都会保留。

有很多方法可以做到这一点。最惯用的方法是使用 useReducer 钩子，然后在您的应用中实现“香草”Flux architecture（又称单向数据流）。

如果你不想自己写所有的样板（这里不做判断），你可以看看Redux，它会为你做大部分的后台工作。

Redux 仍然需要大量的样板。如果你不喜欢它并且感觉更像是流和 observables 的人，你可以使用MobX，它为状态管理实现了反应式编程模式。

【讨论】：

感谢您的建议。我知道我可以自己管理所有的状态。但是，有很多状态，并且我正在使用第三方库，这可能会使监视状态或道具变得非常困难。当然，无论用户显示什么，都已经——正是——我想要显示的。所以我真的很想不必手动管理状态。