仅作记录,我仍在使用 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 查询的方法.
关于如何取得比我在这里所做的更好的事情的任何想法?
最佳答案
当转换到下一个选项卡时,您可以将当前查询参数(可以从 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})
希望对您有所帮助。
关于javascript - goBack 按钮,同时使用 react-router 保留 url 状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34161934/