React Router如何仅修改浏览器URL不触发路由页面内容加载

这个效果的核心是绕开React Router的路由匹配触发逻辑，只同步地址栏展示内容，完全保留当前页面的状态与渲染结果。不要用useNavigate实现这个需求——这个API本身的设计目标就是触发路由跳转、匹配对应路由组件渲染，自然会触发页面内的数据拉取逻辑。

推荐实现方案 #

直接调用浏览器原生的History API即可，这是性能最好、逻辑最可控的方案：

• window.history.replaceState：修改地址栏URL时替换当前的浏览历史记录，不会新增回退栈条目，适合商品保存后同步新商品ID的场景，用户点击浏览器回退按钮不会跳回保存前的预览页临时地址
• window.history.pushState：修改地址栏URL时新增一条浏览历史记录，用户点回退可以回到修改前的地址，按需选用即可

这两个API修改URL时，既不会触发浏览器页面刷新，也不会触发popstate事件，React Router完全感知不到URL变化，当前页面的所有状态、渲染内容都会完整保留，没有任何额外性能消耗。等用户手动刷新页面时，浏览器会直接请求新URL对应的内容，React Router初始化时会正常匹配路由拉取数据，完全符合需求。

替换后的代码如下：

// 实现这个效果不需要引入useNavigate，直接写点击逻辑即可
<p onClick={() => {
  // 商品保存场景推荐用replaceState
  window.history.replaceState(
    null, // 关联的状态对象，无特殊需求传null即可
    '', // 标题参数，目前主流浏览器均忽略该参数，传空字符串即可
    '/product/stackoverflow-shirt' // 要同步到地址栏的目标URL
  )
}}>!don't fetch the content</p>

注意事项：

1. 传入的目标URL必须和当前页面同源，否则浏览器会抛出跨域错误
2. 如果你使用的是Next.js、Remix这类自带路由体系的全栈框架，不要直接使用原生History API，会导致框架内部路由状态和地址栏不同步；纯客户端React + React Router的场景可以放心使用

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