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