广州网站建设 推广公司哪家好,微信公众号网站开发本地调试,知己知彼网站,wordpress 添加自定义小工具栏1. react 路由原理
不同路径渲染不同的组件 有两种实现方式 ● HasRouter 利用hash实现路由切换 ● BrowserRouter 实现h5 API实现路由切换
1. 1 HasRouter
利用hash 实现路由切换
1.2 BrowserRouter
利用h5 Api实现路由的切换
1.2.1 history
HTML5规范给我们提供了一个…1. react 路由原理
不同路径渲染不同的组件 有两种实现方式 ● HasRouter 利用hash实现路由切换 ● BrowserRouter 实现h5 API实现路由切换
1. 1 HasRouter
利用hash 实现路由切换
1.2 BrowserRouter
利用h5 Api实现路由的切换
1.2.1 history
HTML5规范给我们提供了一个history接口HTML5 HIstory API包含两个方法history.pushState()和history.replaceState(),和一个事件 window.onpopstate pushState
1.2.1.1 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事件
2 实现基本路由
2.1 HashRouter 基本用法及实现
import React from react;
import { Router } from ../react-router;
import { createHashHistory } from ../history;
class HashRouter extends React.Component {constructor(props) {super(props);this.history createHashHistory(props)}render() {return (Router history{this.history}{this.props.children}/Router)}
}
export default HashRouter;history 下的 createHashHistory.js
/*** 工厂方法用来返回一个历史对象*/
function createHashHistory(props) {let stack [];//模拟一个历史条目栈这里放的都是每一次的locationlet index -1;//模拟一个当前索引let action POP;//动作let state;//当前状态let listeners [];//监听函数的数组let currentMessage;let userConfirm props.getUserConfirmation?props.getUserConfirmation():window.confirm;function go(n) {//go是在历史条目中跳前跳后条目数不会发生改变action POP;index n;if(index 0){index0;}else if(index stack.length){indexstack.length-1;}let nextLocation stack[index];statenextLocation.state;window.location.hash nextLocation.pathname;//用新的路径名改变当前的hash值}function goForward() {go(1)}function goBack() {go(-1)}let listener (){let pathname window.location.hash.slice(1);// /users#/api /apiObject.assign(history,{action,location:{pathname,state}}); if(action PUSH){stack[index]history.location;//1 2 3 6 5 //stack.push(history.location);}listeners.forEach(listenerlistener(history.location));}window.addEventListener(hashchange,listener);//to{pathname:,state:{}}function push(to,nextState){action PUSH;let pathname;if(typeof to object){state to.state;pathname to.pathname;}else {pathname to;state nextState;}if(currentMessage){let message currentMessage({pathname});let allow userConfirm(message);if(!allow) return;}window.location.hash pathname;}function listen(listener) {listeners.push(listener);return function () {//取消监听函数,如果调它的放会把此监听函数从数组中删除listeners listeners.filter(l l ! listener);}}function block(newMessage){currentMessage newMessage;return (){currentMessagenull;}}const history {action,//对history执行的动作push,go,goBack,goForward,listen,location:{pathname:window.location.hash.slice(1),state:undefined},block}if(window.location.hash){action PUSH;listener();}else{window.location.hash/;}return history;
}export default createHashHistory;2.2 BrowserRouter基本用法及实现
import React from react;
import { Router } from ../react-router;
import { createBrowserHistory } from ../history;
class BrowserRouter extends React.Component {constructor(props) {super(props);this.history createBrowserHistory(props)}render() {return (Router history{this.history}{this.props.children}/Router)}
}
export default BrowserRouter;history 下的 createBrowserHistory.js
/*** 工厂方法用来返回一个历史对象*/
function createBrowserHistory(props){let globalHistory window.history;let listeners [];let currentMessage;let userConfirm props.getUserConfirmation?props.getUserConfirmation():window.confirm;function go(n){globalHistory.go(n);}function goForward(){globalHistory.goForward();}function goBack(){globalHistory.goBack();}function listen(listener){listeners.push(listener);return function(){//取消监听函数,如果调它的放会把此监听函数从数组中删除listeners listeners.filter(ll!listener);}}window.addEventListener(popstate,(event){//push入栈 pop类似于出栈setState({action:POP,location:{state:event.state,pathname:window.location.pathname}});});function setState(newState){Object.assign(history,newState);history.length globalHistory.length;listeners.forEach(listenerlistener(history.location));}/*** push方法* param {*} path 跳转的路径* param {*} state 跳转的状态*/function push(to,nextState){//对标history pushStateconst action PUSH;let pathname;let state;if(typeof to object){state to.state;pathname to.pathname;}else {pathname to;state nextState;}if(currentMessage){let message currentMessage({pathname});let allow userConfirm(message);if(!allow) return;}globalHistory.pushState(state,null,pathname);let location {state,pathname};setState({action,location});}function block(newMessage){currentMessage newMessage;return (){currentMessagenull;}
}const history {action:POP,//对history执行的动作push,go,goBack,goForward,listen,location:{pathname:window.location.pathname,state:globalHistory.state},block}return history;
}export default createBrowserHistory;
