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

Question

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

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

• 在 URL 中添加诸如“?active=1”之类的参数。

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

标签： react-routerbrowser-history

Answer 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);
};