搜索场景不刷新页面更新url查询参数

场景

工作中我们经常会遇到点击查询按钮，需要将url上的参数部分改变，方便发送链接分享给其他用户能够自动查询信息。

但是我尝试了几种方法后，均失败告终。因为无论用React Router V5中的 useHistory 还是React Router V6中的 useNavigate 在修改参数的同时都会刷新页面，虽然也能完成功能，但是体感很不好，用户还是能感知到点击查询的时候，页面dom更新了。

后来我尝试用 window.history.pushState({}, '', newUrl); 这个原生的API发现成功了！！！

解决方案

window.history.pushState

是HTML5中引入的历史管理API的一部分，目的是让网页在不触发页面刷新（避免重新加载整个页面资源）的情况下，更新浏览器的地址栏URL，并管理浏览器的历史记录状态

• 第一个参数：用于存储与新的路是记录状态相关的任意数据，这些数据可以在用户通过浏览器的前进或后退按钮浏览历史记录时被访问到，使的应用能够恢复到之前的状态。
• 第二个参数：指定了更新到新的URL地址，这个URL会显示在浏览器的地址栏中，并且会被添加到浏览器的历史记录中。可以是绝对路径或相对路径。

贴下我项目中的代码

	/**
	 * 改变url参数（不刷新页面）
	 */
	const settingUrlParams = () => {
		const queryParam = `query=${searchValue}&types=${encodeURIComponent(JSON.stringify(types))}`;
        const newUrl = `${window.location.protocol}//${window.location.host}${window.location.pathname}?${queryParam}`;
        window.history.pushState({}, '', newUrl);
	};