react-router|react-router hash history and browser history
最近一个SPA的玩具项目中在用react-router,有个问题一直在困扰我。我按照官方的文档,使用browserHistory,然后生成的客户端路由都是不带#的。这样在一个子级路由中刷新页面,就是请求这个子级路由,我后端就得能识别这个子级路由。。这就有些蛋疼,和我以前用过的#/XXX这样的客户端路由有些不同。
不应该啊,作者不可能没考虑到这个问题啊,肯定是我哪里用的不对。于是乎,我又去看了下文档。
找到这篇文档 Histories,终于算是解决了我的疑惑。
react-router提供了三种方式来实现路由,并没有默认的路由,需要在声明路由的时候,显式指定所使用的路由。
//v1.x
//v2.0.0
// hash history
import { hashHistory } from 'react-router'
- browserHistory
- hashHistory
- createMemoryHistory
文档中有一句也提到了为什么推荐使用browser history,而不是hash history。要知道,react router以前是默认使用hash history的。
You might wonder why we don't fall back to hash history; the problem is that URLs become non-deterministic. If a visitor on hash history shares a URL with a visitor on browser history, and then they share that back, we end up with a terrible cartesian product of infinite potential URLs.意思就是怕 hash history 和 browser history 的混用在分享url时引起混乱。
我有点不太明白,一个app应该只会采用一种方式,不会混用啊。
【react-router|react-router hash history and browser history】先留个坑,待我再查查。
在stackoverflow上提了个问题,总算解决了疑惑。
文档中的意思是在运行时切换 browser history 和 hash history,而不是我之前理解的只有一种方式实现。那在分享url的时候,自然是会引起混乱的。
推荐阅读
- webpack|webpack 学习笔记之十一 hash chunkhash contenthash
- 手撸Router,还要啥Router框架(react-router/vue-router躺一边去)
- React|react-router v6 简单的路由拦截
- react|react-router 5 管理路由
- guava中Multimap、HashMultimap用法小结
- day24--Java集合07
- Java中Map和HashMap浅谈
- [极致用户体验]|[极致用户体验] 网页里的「返回」应该用 history.back 还是 push ()
- Redis常用指令之string、list、set、zset、hash
- React|react-router之路由重定向