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

Question

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

我有主视图(网格)和详细 View 。在详细 View 中有两个选项卡(每个选项卡都是项目内的一条路线)。像这样的东西:

grid/
 item/
    tab/
    tab/

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

在网格组件中，我们可以更改排序，这将反射(reflect)到 URL 中。我想要实现的是 <Item/> 中的后退按钮组件。

我试过 goBack()来自 react-router 但我有两个主要问题:

• 如果用户单击 <Item/> 中的选项卡组件，goBack()功能将返回到上一个选项卡，而不是 <Grid/> (这当然很正常，但不是我想要的)。
• 如果用户在看到 <Item/> 时刷新页面组件，点击返回会说:

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

接下来尝试，使用 getCurrentRoutes() :

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

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

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

关于如何取得比我在这里所做的更好的事情的任何想法？

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

希望对您有所帮助。