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

Posted 学习笔记666

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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即可。


现在刷新浏览器就不会出错了。

以上是关于react.js的两种路由方式:HashRouter的主要内容,如果未能解决你的问题,请参考以下文章

前端学习(2975):路由传参的两种方式

前端学习(2975):路由传参的两种方式

前端路由的两种实现方式

前端学习(2968):实现路由跳转的两种方式

前端学习(2968):实现路由跳转的两种方式

Vue路由传递query参数的两种方式