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
即可。
现在刷新浏览器就不会出错了。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)