hashHistory and browserHistory in React-Router

React Router v1.0 到 v2.0 迁移
本文讲述了作者从 React Router v1.0 迁移到 v2.0 的经历,主要关注 hashHistory 和 browserHistory 的区别。通过实际案例解释了如何在项目中使用这两种方式,并探讨了它们对服务器端路由配置的影响。

hashHistory and browserHistory are two kinds of common React-Router Histories implementations.
When I was using React-Router v1.0, I read the doc in github and wrote the code like this

import { Router} from 'react-router'
ReactDOM.render (( 
 <Router>
   ...
), document.body);

I found something in url like #/home/k=ckuvupr. What the hell is this?
I went back to the doc and changed the code with browserHistory. With the doc, I knew the default implementation ishashHistory, which will make a # -- hash in url.

import { browserHistory } from 'react-router'
ReactDOM.render (( 
 <Router history={browserHistory} >
   ...
), document.body);

However, it would not effect in v1.0, it's the way in v2.0. So I didn't see anything changed. And just for a while, I forgot to deal with this, and went to write other codes.

Today when I c&p this chunk of code to my new project, using some new tools. The build tool automatically install react-router v2.0 for me. While the hash tag is gone, and url looks like the real url. But it cause another problem, that is when the url is like the real url, it means that I should set the server side route to /* -> index.html rather than / -> index.html.
Otherwise, it will get a 404 error when the url /home is re-flushed. And the problem will not raise while usinghashHistory, because the url is like /#/home and it is still /, the string after hash tag is not in the route rule. Docs about them.

I havn't find the correct way to set the server side route, because I am using a webpack-dev-server-like tool, I don't know how to change the route.
So I go back to use the ugly hashHistory.

It seems a waste of time, my fault is reading doc but not paid attention to version, but I still hate the doc because the difference between v1.0 and v2.0 is not heightlighted.


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值