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',