如何在 React Router v5 中更新 URL 并替换历史状态而不重新渲染整个应用程序？

Posted 2023-02-21

【中文标题】如何在 React Router v5 中更新 URL 并替换历史状态而不重新渲染整个应用程序？

【英文标题】：How to update the URL and replace history state in React Router v5 without re-rendering the whole app?

【发布时间】：2021-01-13 09:34:16

【问题描述】：

在使用 React Router 及其浏览器历史记录时，有几种情况会触发重新渲染，我不想重新渲染整个应用程序：

使用 history.replace('currentPath', data: 'someState' ;

向 URL 添加参数，例如“?active=1”。

有没有办法做到这一点，或者解决方案是优化某些组件的性能？

【参考方案1】：

你可以像这样使用history.replaceState()：

const setQueryParams = (param, value) => 
    const history = window.history;
    let currentUrlParams = new URLSearchParams(window.location.search);
    currentUrlParams.set(param, value);

    const url = `$window.location.pathname?$currentUrlParams.toString()`;
    history.replaceState(, '', url);
;