search

z-memo / interview

我们缺的从来都不是前端/后端工程师，而是工程师(或者那些会系统思考，并总是想着解决问题的人)
27 stars 3 forks source link

browserHistory与hashHistory #142

Open MrSeaWave opened 3 years ago

MrSeaWave commented 3 years ago
  • BrowserRouter 是使用 HTML 5 的 history API 来控制路由跳转的
  • HashRouter 是通过 URL 的 hash 属性来控制路由跳转的：

browserHistory 需要 server 端支持。 而使用hashHistory的时候， 因为url 中 # 符号的存在，从 /#/ 到/#/user/list 浏览器并不会去发送一次 request react-router 自己根据 url 去 render相应的模块。 而使用 browserHistory 的时候，浏览器从 / 到 /user/list 是会向 server 发送 request 的。所以 server 端是要做特殊配置的。

MrSeaWave commented 2 years ago

解释一下为什么browserHistory需要服务端配置，因为真实URL其实是指向服务器资源，比如我们经常使用的API接口，也是一个真实URL的资源路径，当通过真实URL访问网站的时候，第一次访问的是网站的域名，这个时候可以正常加载我们的网站js等文件，而用户手动刷新网页时，由于路径是指向服务器的真实路径，服务器端没有做路由配置，就会导致资源不存在，用户访问的资源不存在，返回给用户的是404错误。 通过hashHistory来生成的URL就不会出现这样的问题，因为他不是指向真实的路由。

MrSeaWave commented 2 years ago

多页面模式，就是多个HTML页面之间的操作，浏览器会通过自身的history处理好页面间的操作，

单页面模式，对于浏览器来说只有一个HTML页面，任何操作都在同一个页面内，浏览器无法监控到页面跳转（实际只是内容改变，路径没变）

在单页面模式下使用browserHistory 的问题是：只有一个真实的html页面，是无法体现出html页面之间跳转的效果的

这时就需要使用服务器配合，模拟出多个HTML页面，从而实现浏览器真实的页面跳转效果