React Route

最新推荐文章于 2024-07-13 21:47:20 发布

超超超女

最新推荐文章于 2024-07-13 21:47:20 发布

阅读量240

点赞数

分类专栏：前端 react 文章标签： react.js javascript

本文链接：https://blog.csdn.net/baidu_27448251/article/details/120038227

版权

本文详细介绍了React Router的原理，包括HashRouter和BrowserRouter的实现方式，重点解析了history接口的pushState和replaceState方法以及onpopstate事件。此外，还概述了基本路由的安装和配置过程，讲解了如何创建和使用history，以及路由相关的其他组件和hooks。

摘要由CSDN通过智能技术生成

1.React路由原理

不同的路径渲染不同的组件
有两种实现方式
- HashRouter:利用hash实现路由切换
- BrowserRouter:实现h5 Api实现路由的切换

1.1HashRouter

利用hash实现路由切换
public\index.html

<body>
    <ul>
      <li><a href="#/a">/a</a></li>
      <li><a href="#/b">/b</a></li>
    </ul>
    <div id="root"></div>
    <script>
      window.addEventListener('hashchange', ()=>{
     
        console.log(window.location.hash);
        let pathname = window.location.hash.slice(1);
        document.getElementById('root').innerHTML = pathname;
      })
    </script>
  </body>

1.2BrowserRouter

利用h5 Api实现路由的切换

1.2.1 history

HTML5规范给我们提供了一个history接口
HTML5 History API包括2个方法：history.pushState()和history.replaceState()，和1个事件window.onpopstate

1.2.1.1 pushState

history.pushState(stateObject, title, url)，包括三个参数
第一个参数用于存储该url对应的状态对象，该对象可在onpopstate事件中获取，也可在history对象中获取
第二个参数是标题，目前浏览器并未实现
第三个参数则是设定的url
pushState函数向浏览器的历史堆栈压入一个url为设定值的记录，并改变历史堆栈的当前指针至栈顶

1.2.1.2 replaceState

该接口与pushState参数相同，含义也相同
唯一的区别在于replaceState是替换浏览器历史堆栈的当前历史记录为设定的url
需要注意的是replaceState不会改动浏览器历史堆栈的当前指针

1.2.1.3 onpopstate

该事件是window的属性
该事件会在调用浏览器的前进、后退以及执行history.forward、history.back、和history.go触发，因为这些操作有一个共性，即修改了历史堆栈的当前指针
在不改变document的前提下，一旦当前指针改变则会触发onpopstate事件

1.2.1.4 案例

浏览器针对每个页面维护一个History栈,执行pushState函数可压入设定的url至栈顶,同时修改当前指针
当执行back和forward操作时，history栈大小并不会改变（history.length不变），仅仅移动当前指针的位置
若当前指针在history栈的中间位置(非栈顶)，此时执行pushState会在指针当前的位置添加此条目,并成为新的栈顶

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #root{
     
            border:1px solid red;
            height:20px;
        }
    </style>
</head>
<body>
    <div id="root"></div>
    <script>
        var historyObj = window.history;
        //监听路径改变事件 表示将当前的状态变更了，弹出了
        window.onpushstate = (event) => {
     
            console.log(event.type,event.detail.state);
            root.innerHTML = window.location.pathname;
        }
        window.addEventListener('popstate',

最低0.47元/天解锁文章

超超超女

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
React Route

1.React路由原理不同的路径渲染不同的组件有两种实现方式HashRouter:利用hash实现路由切换BrowserRouter:实现h5 Api实现路由的切换1.1HashRouter利用hash实现路由切换public\index.html<body> <ul> <li><a href="#/a">/a</a></li> <li><a href="#/b
复制链接

扫一扫

专栏目录