美文网首页
React Route采坑记录(history.replace

React Route采坑记录(history.replace

作者: 7b7d23d16ab5 | 来源:发表于2021-04-26 14:38 被阅读0次

    有时候需要对 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}`) // 重新替换 参数部分
    }
    

    相关文章

      网友评论

          本文标题:React Route采坑记录(history.replace

          本文链接:https://www.haomeiwen.com/subject/kmkerltx.html