reactjs - 避免 react-router goBack() 退出应用程序

Question

我正在使用 vanilla React 和 react-router 来构建一个简单的主从 SPA。 在列表页面中，我使用 push(*route*) 将用户导航到详细 View ，详细 View 上的后退按钮然后调用 goBack() 进行导航用户到 ListView 。

我使用 goBack() 函数而不是 push('/list') 的原因是允许用户导航回 ListView 而无需丢失过滤/分页参数(例如/list/1/10?q=abc)。

我遇到的问题是，如果用户从例如Google，然后将详细 View url 复制/粘贴到地址栏中，goBack() 函数会将它们带回 Google，因为 Google 是他最后的历史记录。

有没有一种方法可以检查 goBack() 目标并根据用户是否退出应用程序来决定执行 goBack()？

Answer 1

我们可以使用路由器将列表页中的查询参数作为状态推送到目标页面，只有从列表页导航到详情页时才可用。

状态只在当前应用范围内维护。将 url 复制粘贴到另一个浏览器选项卡中将丢失此状态。

例子: 列表页导航到详情页

router.push({
    pathname: '/users/12',
    query: { modal: true },
    state: { fromDashboard: true }
})

详情页:

if (this.props.location.state && this.props.location.state.params) {
    navigateBackUsingParams(this.props.location.state.params);
} else {
    navigateBackWithHardcodedUrl();
}