React Route 踩坑记录 之 history.replace 会导致组件更新

有时候需要对url进行更改的时候，不想让页面出现任何刷新或更新，于是就想用 history.replace 去更改 url ，但是会导致组件执行 update操作 （mount事件不执行，仅执行update事件），但是 state 也会被重置

解决方案

使用原生js去修改url地址，避免适应 react 内部封装的 history.replace 函数（不干净）

/**
 * 替换路由的 url （使用 js 原生方式更新 url 避免组件不必要的更新）
 * react 的 history.push 和 history.replace 都会导致组件更新(不仅是重新渲染，组件的所有 state 都会被重置)
 */
export const replaceRouteUrl = ({pathname, search}:any) => {
    // // 用 window.history.replaceState 方式更改 url 不会让组件重新渲染
    // //（用 this.props.history.replace(path) 会让组件重新渲染，这不是想要的效果）
    // const originUrl = window.location.href // 获取当前完整的 url
    // const valiable = originUrl.split("?")[0] // 截取出 问号? 前面的路由 url（去掉参数部分）
    // window.history.replaceState(null, '', `${valiable}${search}`) // 重新替换 参数部分

  window.history.replaceState(null, '', `${pathname}${search}`) // 重新替换 参数部分
}

注:感谢原作者，源地址：www.jianshu.com/p/bc3a21c00…