goBack 按钮，同时使用 react-router 保留 url 状态答案

【问题标题】：goBack button while preserving url state using react-routergoBack 按钮，同时使用 react-router 保留 url 状态
【发布时间】：2016-03-13 17:31:11
【问题描述】：

仅作记录，我仍在使用 react-router 0.13.x。好的，这就是我想要做的：

我有主视图（网格）和详细视图。在详细视图中有两个选项卡（每个选项卡都是项目内的一条路线）。比如：

grid/
 item/
    tab/
    tab/

grid可以这样在url中有查询：http://url.com/grid?sort=name

在网格组件中，我们可以更改排序并将其反映到 URL 中。我要实现的是<Item/> 组件内的后退按钮。

我尝试使用 react-router 中的goBack()，但我有两个主要问题：

如果用户单击<Item/> 组件内的选项卡，goBack() 函数将返回上一个选项卡，而不是<Grid/>（这当然是正常的，但不是我想要的）。
如果用户在看到<Item/> 组件时刷新页面，点击 goBack 会显示：

Warning: goBack() was ignored because there is no router history

下一次尝试，使用getCurrentRoutes():

this.context.router.transitionTo(routes[routes.length-2].path);

这样做的问题是用户将丢失其对<Grid /> 的sort 选择。因此，如果用户将排序更改为姓氏：http://url.com/grid?sort=surname，单击一个项目并使用返回按钮，他将返回到默认路由：http://url.com/grid?sort=name。如果用户使用本机浏览器后退按钮，则不会发生这种情况，即使用户刷新<Item/> 页面，单击本机后退按钮也会将用户带到具有正确排序查询的<Grid/>。

我想我在这里基本上看的是一个 goBack()，它返回到父路由（在这种情况下为 <Grid/>）忽略来自 <Tab/> 的内部路由，然后是一种在返回时保留 url 查询的方法到<Grid/>。

有什么想法可以比我在这里做得更好吗？

【问题讨论】：

标签： javascript reactjs react-router html5-history

【解决方案1】：

您可以在转换到下一个选项卡时将当前查询参数（可以从 this.props.location.query 访问）放入 Location 对象中，如下所示：

   // go to next tab
   this.context.router.push({
     pathname:'/tab2', 
     query: this.props.location.query})
   // go back
   this.context.router.push({
     pathname: routes[routes.length-2].path, // your grid path
     query: this.props.location.query})

希望对你有帮助。

【讨论】：