React-router(3)BrowserRouter 和 HashRouter(哈希地址和普通地址)

x33g5p2x  于2022-03-06 转载在 其他  
字(0.5k)|赞(0)|评价(0)|浏览(452)

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。

相关文章