react.js的两种路由方式:HashRouter

react.js路由-初步

前面我们已经了解了react.js其中一种路由方式。

这种方式是利用 html5的`window.history`,对浏览器历史记录的读取。
`history.back()` 和在浏览器点击后退按钮相同;
`history.forward()`和在浏览器中点击前进按钮相同。

另外h5时段开始支持`pushState()`和`replaceState()`方法,并且当回退/前进是会触发`onpopstate()`事件。
参考文档:
https://developer.mozilla.org/zh-CN/docs/Web/API/Window/onpopstate

这里写图片描述
从上面动图可以看出:当我们刷新浏览器的时候 就出问题了。

HashRouter

现在 我们来学习另外一种路由方式:hash路由
参考示例:
https://reacttraining.com/react-router/web/api/HashRouter

把BrowserRouter改成HashRouter,其实也很简单。
主要是引入的包不同:

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

#改为
import {
    HashRouter as Router,
    Route,
    Link
} from 'react-router-dom';

就是把BrowserRouter改成HashRouter即可。

这里写图片描述
现在刷新浏览器就不会出错了。

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值