如何在不跳转页面的情况下修改URL？react-router-dom实现方法

实现目标：保持主机地址不变，仅修改URL路径部分，全程不触发页面刷新、不跳转离开当前页面。

React Router DOM 对应实现 #

你提到的react-router-dom提供的无刷新改URL能力，不同版本调用方式不同：

• v6（当前主流版本）：使用useNavigate钩子，开启replace配置即可替换当前URL，不会新增多余的浏览历史记录：

import { useNavigate } from 'react-router-dom';

function DemoComponent() {
  const navigate = useNavigate();

  const changeUrl = () => {
    // 传入要修改的新路径即可，主机地址会自动保持和当前站点一致
    navigate('/fgdgs', { replace: true });
  }
}

• v5版本：使用useHistory钩子的replace方法实现：

import { useHistory } from 'react-router-dom';

function DemoComponent() {
  const history = useHistory();

  const changeUrl = () => {
    history.replace('/fgdgs');
  }
}

注意：使用react-router-dom的API修改路径时，要确保新路径不会匹配到其他路由规则，否则会触发对应路由组件的渲染，导致当前页面内容被替换。如果希望无论路径修改为任何值，都完全保留当前页面内容不切换，直接使用原生浏览器API是最稳妥的方案。

原生JS通用实现（无框架依赖） #

现代浏览器都支持HTML5 History API，直接调用window.history.replaceState就能实现地址栏URL修改，全程不会触发页面刷新、不会卸载当前页面DOM和状态，和你用什么前端框架、路由库无关：

// 参数说明：
// 第一个参数：状态对象，不需要传null即可
// 第二个参数：页面标题，目前绝大多数浏览器会忽略该参数，传空字符串即可
// 第三个参数：新的路径，写相对路径会自动拼接当前站点的主机地址
window.history.replaceState(null, '', '/fgdgs');

如果需要保留浏览历史，让用户点击浏览器返回键能回到修改前的URL，可以把replaceState换成pushState，两个API都不会触发页面跳转。

实现效果和你给出的示例完全一致：

• 原始URL：localhost:3000/sagsdfgs
• 执行代码后新URL：localhost:3000/fgdgs
• 页面全程停留在当前页，无刷新、无跳转。

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