React：使用history.push前如何跳转其他组件？同路由下history.push失效问题

问题根源 #

1. 你没有给第二个history.push加else分支，不管是否命中/listing的判断逻辑，第二个跳转指令都会执行，直接覆盖了前面跳首页的操作。
2. 同步连续调用两次history.push时，react-router会批量处理路由更新，最终只会生效最后一次跳转指令，这也是你删掉第二个push后跳首页逻辑就能正常运行的原因。

解决方案 #

最优方案（无需跳转首页绕路） #

你最初的诉求是在列表页提交搜索后，页面能按新关键词渲染商品。本质问题是当前在/listing路径时，路由参数变化没有触发列表数据重新请求，你只需要在列表页组件监听路由search参数变化，重新拉取商品数据即可：

// 列表页组件示例代码
import { useEffect } from 'react'

const ListingPage = ({ history }) => {
  useEffect(() => {
    // 从路由参数中取出搜索词
    const searchQuery = new URLSearchParams(history.location.search).get('q')
    // 调用接口拉取对应商品数据
    fetchListingList(searchQuery)
  }, [history.location.search]) // 监听search参数变化触发回调
}

如果你需要保留「先跳首页再跳列表页」的逻辑 #

需要让第二次跳转在第一次跳转完成后执行，你可以把第二次跳转放到异步队列，同时补充else分支避免逻辑冗余：

const submitHandler = (e) => {
  e.preventDefault();
  const targetSearch = '?' + searchword;
  if (history.location.pathname === "/listing") {
    history.push({
      pathname: HOME_PAGE,
      search: targetSearch, 
      state: { detail: 'some_value' } 
    });
    // 异步执行第二次跳转，避免覆盖第一次操作
    setTimeout(() => {
      history.push({
        pathname: LISTING_POSTS_PAGE,
        search: targetSearch, 
        state: { detail: 'some_value' }
      })
    }, 0)
  } else {
    // 非列表页直接跳列表页即可
    history.push({
      pathname: LISTING_POSTS_PAGE,
      search: targetSearch, 
      state: { detail: 'some_value' }
    })
  }
}

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