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

Question

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

我有主视图（网格）和详细视图。 在详细视图中有两个选项卡（每个选项卡是项目内的路径）。 就像是：

grid/
 item/
    tab/
    tab/

网格可以通过以下方式在网址中进行查询： 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 =姓氏，点击进入项目并使用后退按钮，他将返回默认路线： http ： //url.com/ grid？sort = name 。 如果用户使用本机浏览器后退按钮，则不会发生这种情况，即使用户刷新<Item/>页面，单击本机后退按钮也会将用户带到具有正确排序查询的<Grid/> 。

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

有关如何做到更好的事情的想法，我在这里做了什么？

Answer 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})

希望能帮助到你。