Question

我正在使用带有react-router的vanilla React来构建一个简单的主 - 细节SPA。在列表页面中，我使用push(*route*)将用户导航到详细视图，然后在详细信息视图上使用后退按钮调用goBack()以将用户导航到列表视图。

我使用goBack()函数而不是push('/list')的原因是允许用户导航回列表视图而不会丢失过滤/分页参数（例如/ list / 1/10？ q = ABC）。

我遇到的问题是，如果用户启动浏览器，例如谷歌，然后将详细视图网址复制/粘贴到地址栏中，goBack()功能会将他们带回谷歌，因为谷歌是他的最后一段历史。

有没有办法检查goBack()目的地，并根据用户是否退出申请来决定执行goBack()？

Answer 1

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

状态仅在当前应用程序范围内维护。将网址粘贴到另一个浏览器标签中会丢失此状态。

实施例：列表页面导航到详细信息页面

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();
}

避免react-router goBack（）退出应用程序

1 个答案: