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。

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值