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


    前面我们已经了解了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即可。


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

    https://blog.csdn.net/github_26672553/article/details/76906488
    ---------------------
    作者:学习笔记666
    来源:CSDN
    原文:https://blog.csdn.net/github_26672553/article/details/76906488
    版权声明:本文为博主原创文章,转载请附上博文链接!

  • 相关阅读:
    python 17 函数基础(一)
    python 17 异常
    python 16 文件操作(二)
    python 15 文件操作(一)
    python 13 字符编码
    《转》python 12 列表解析
    《转》python 11 表达式和语句
    关于int型数据的SQL模糊查询猜想
    PB学习笔记
    JSONObject.fromObject()
  • 原文地址:https://www.cnblogs.com/shaozhu520/p/11188950.html
Copyright © 2020-2023  润新知