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

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

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

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

Answer 1

您可以在转换到下一个标签时将当前查询参数（可以从// 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})访问）放在位置对象中，如下所示：

size()

希望它有所帮助。

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

1 个答案: