React-router 中的BrowserRouter 和 HashRouter

前两节的DEMO，都是 HashRouter，而非 BrowserRouter ，二者有所不同。以下解释的前提是你要懂什么叫 hash 地址，hash 地址就是指 # 号后面的 url。假如有一个 Link 标签，点击后跳转到 

/abc/def

。BrowserRouter： 

http://localhost:8080/abc/def

HashRouter： 

http://localhost:8080/#/abc/def

如果有服务器端的动态支持，建议使用 

BrowserRouter

，否则建议使用 

HashRouter

。原因在于，如果是单纯的静态文件，假如路径从 

/

 切换到 

/a

 后，此时刷新页面，页面将无法正常访问。二者的替换方法很简单，我们在引入 

react-router-dom

 时，如以下：

import {
BrowserRouter as Router,
Route,
Link
} from 'react-router-dom'

1
2
3
4
5
将 

BrowserRouter

 修改为 

HashRouter

 就可以了，基本不需要修改其他东西。因为写服务器文件还比较麻烦，因此在之后的 DEMO 中，我们将主要使用 HashRouter 而不是 BrowserRouter。