ReactJS中history.push函数的作用是什么？

一、history.push()的定义 #

简单来说，history.push()是React Router（React生态里专门处理路由的库）提供的核心方法，专门用来在单页应用（SPA）里做前端路由跳转，而且完全不会触发浏览器的整页刷新——这也是SPA流畅体验的关键之一。

它的核心逻辑是：向浏览器的历史记录栈中添加一条新的记录，同时把应用的当前路由切换到你指定的路径。用户之后点击浏览器的后退按钮，就能回到跳转前的页面，和正常浏览器导航的体验一致。

在React Router v5及更早版本中，你可以通过useHistory钩子拿到这个history对象；到了v6版本，官方把它换成了useNavigate钩子，但push的核心逻辑本质上是一样的，只是调用方式略有不同。

二、代码history.push(/group/${searchResult.id}/overview)的具体作用 #

咱们拆解来看这段代码：

1. 动态生成目标路径：这里用了ES6的模板字符串，把searchResult.id的值插入到路径里。比如如果searchResult.id是456，最终生成的路径就是/group/456/overview。
2. 触发路由跳转：调用history.push()后会做这几件事：
   • 给浏览器的历史栈新增一条记录，路径就是刚才生成的动态地址；
   • 触发React Router的路由匹配机制，自动渲染对应/group/:groupId/overview这个路由规则的组件（前提是你已经在路由配置里定义了这条规则）；
   • 浏览器地址栏会同步更新成这个新路径，但整个过程不会刷新页面，只是前端组件的切换，用户体验会非常流畅。

举个实际场景：比如你做了一个群组搜索功能，用户搜索后得到一堆群组结果，点击其中某一个群组卡片时，就会执行这段代码，跳转到该群组的专属概览页面，并且把群组的ID通过路径传过去，这样概览页面的组件就能拿到这个ID，去加载对应群组的详细数据啦。

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