React-router（3）BrowserRouter 和 HashRouter（哈希地址和普通地址）

3、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'

将

BrowserRouter

修改为

HashRouter

就可以了，基本不需要修改其他东西。

因为写服务器文件还比较麻烦，因此在之后的 DEMO 中，我们将主要使用 HashRouter 而不是 BrowserRouter。