react路由跳转导致组件两次重复挂载

react路由跳转导致组件两次重复挂载

问题

在使用react的history.push()方法进行路由跳转时，组件重复加载两次。代码案例如下：

	this.props.history.push(`/xxx/xxxx?title=参数`)

后面多次检查代码后发现，是在使用history.push()方法时，参数值为中文才会出现该问题，其他类型则不会出现该问题。

原因

仔细追究其原因，应该是在进行带参数跳转时，浏览器会自动对中文进行转码，然后又会导致router的history方法监听浏览器地址栏变化。也就是说当我们执行上面的代码时，浏览器地址会变化两次，然后导致页面组件也会加载两次；

解决方法

那么最便捷的解决方案如下：

	this.props.history.push(`/xxx/xxxx?title=${encodeURI("参数")}`)

将中文参数进行URI转码，然后在另一个页面转码回中文；