React Router 点击浏览器回退键如何跳过Display组件历史直接返回首页

问题根因 #

默认<Link>组件使用push模式更新路由，每次点击都会向浏览器历史栈新增一条记录，因此在Display组件内多次切换城市时，会生成多条Display路由的历史记录，回退时需要逐个退出。
你之前的修复逻辑错误：在点击事件中执行history.replace("/")是将当前历史记录替换为首页路径，和你需要跳转到新城市Display路由的逻辑冲突，才会出现仅第一次回退生效的问题。

解决方案 #

将Display组件内的<Link>开启replace模式即可，该模式会用新的路由替换当前历史栈的最后一条记录，不会新增历史条目。Home组件内的<Link>保持默认push模式不变，保证从Home跳转到Display时正常新增历史记录，回退可以回到首页。

修改后的Display组件代码 #

<Link to={`/${city}`} replace onClick={()=>{dispatch(fetchWeather(city)); }}>Search</Link>

效果验证 #

修改完成后历史栈的变化逻辑如下：

1. 进入首页，历史栈：['/']
2. 从首页点击搜索进入「北京」页，历史栈：['/', '/beijing']
3. 在「北京」页点击搜索切换到「上海」页，历史栈：['/', '/shanghai']（替换了之前的/beijing记录，没有新增）
4. 多次切换城市后，历史栈始终只保留1条首页记录+1条最新的Display路由记录，点击浏览器回退按钮会直接回到首页。

如果需要更灵活的控制逻辑，也可以放弃<Link>组件，直接调用history.replace方法手动控制路由跳转：

// 点击事件逻辑
const handleSearch = (city) => {
  dispatch(fetchWeather(city))
  history.replace(`/${city}`)
}

// 绑定到普通按钮即可
<button onClick={() => handleSearch(city)}>Search</button>

内容的提问来源于stack exchange，提问作者imtiaz hussain