window.location.href和this.props.history.push

情景描述

• 当前的url：http://localhost:8888/user-center
• 调用window.history.pushState('https://localhost:8085/test')
• 发现url变成http://localhost:8888/user-centerhttps://localhost:8085/test
• 然后替换成window.location.href('https://localhost:8085/test')发现url跳转正确。

矛盾点

• 以前使用history.pushState(url)是可以跳转到url的现在为什么会出现拼接url跳转呢？
• 为什么我们会想要使用window.history.pushState来代替window.location.href？

问题解决

• Q1:window.location对象有什么特点？
• A1:专门用来获取当前页面的地址的相关信息，还可以通过给这些地址属性赋值的方式使得当前页面跳转。
  • window.location.href：获取url，并且可以可以赋值给他新的url，让页面跳转。

---

• Q2:window.history对象有什么特点呢？
• A2:对当前浏览器的url历史记录的管理。可想成：window.history是一个堆栈，里面存放了当前浏览器Tab的所有浏览url并依照浏览顺序存放在堆栈中。
  • 可以通过调用对象的方法从url堆栈中push或者pop url出来。
    window.history.pushState(null,null,url)就是向当前文档的url堆栈中push一个新的url。
    -----> 结论：使用window.history.pushState(null,null,url)是不会使用参数url和当前的url拼接产生新的url跳转的。

---

• Q3:那么window.location.href=newUrl和window.history.pushState(newUrl)之间有什么区别？
• A3:他们之间作用相同完全相同。并且还有一点，他们都是会使用新的url向服务器发送请求然后获取页面。并且服务器会向url堆栈中push newURl

---

• Q4:那么url的拼接是如何造成的呢？
• A4:经过认真查看代码，发现使用的是this.props.history.push,这是react-router-dom中withRouter提供给组件的。通过给组件包装一层withROuter。从而给组件的props中添加了history和match等对象属性。

---

• Q5:那么为什么我们使用this.props.history.push（url）出现了问题呢？
• A5:经过查找资料，网上说最新的react-router改版，使用this.props.history.push已经不能够进行跳转了，应该使用this.context.history.push进行

小结：到现在为止，我们发现有很多方式可以进行路由的跳转，他们之间的不同以及使用的限制和方式都需要进一步了解。

反思

• 之前对于react-router v4的文档我已经看过了，发现这次再出现withRouter的问题，感觉自己完全都不懂。发现自己纯看文档的效率很低，可能针对我本人干看不是一种好的学习方式。

action

• 那么对于以后读文档之类的工具性文章，必须要求自己边写边读。对于每一种用法都试验一下。尤其是note部分