时间戳

首页 > 解决方案 > react-router-dom，如何跳过后退按钮

reactjs - react-router-dom，如何跳过后退按钮

问题描述

单击时，我有一个将用户导航到另一个页面的项目列表。
问题是目标页面需要某种在此列表项页面中不存在的 id。所以我这样做：
列表页面：

{items.map(item=>{
    return <Link to="/resolver/${item}">{item}</Link>
})

解析器页面：

componentDidmout(){
   const {keyword} = this.props.match.params;
   this.props.searchOnServer(keyword)
}
componentDidUpdate(pervProps){
   //after checking some conditions:
   const {redirect_id} = this.props.server_response;
   this.props.history.push(`/some/path/${redirect_id}`)
}

然后目标页面可以使用该 id 来获取产品相关数据：

componentDidMount(){
   const {id} = this.props.match.params;
   fetchSomeStuff(id);
}

现在，上述解决方案完全正常，我唯一的问题是当用户点击目标页面中的后退按钮时，它会返回到解析器页面，整个循环重新开始。如何跳过解析器页面并返回列表页面。

标签： reactjsreact-router-dom

解决方案

您可以从解析器页面进行重定向，因此当用户从新页面点击后退按钮时，他们将返回到解析器路径之前的页面。

更改history.push为history.replace。

历史

componentDidUpdate(pervProps){
   //after checking some conditions:
   const {redirect_id} = this.props.server_response;
   this.props.history.replace(`/some/path/${redirect_id}`)
}

推荐阅读