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

3、BrowserRouter 和 HashRouter

前两节的DEMO，都是 HashRouter，而非 BrowserRouter ，二者有所不同。

以下解释的前提是你要懂什么叫 hash 地址，hash 地址就是指 # 号后面的 url。

假如有一个 Link 标签，点击后跳转到 /abc/def。

1. BrowserRouter： http://localhost:8080/abc/def
2. 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。