引言
在使用react做复杂的spa开发中,开发中必不可少的就是react-router,它使用Lerna管理多个仓库, 在browser端常使用的几个如下所示
- react-router 提供了路由的通用核心功能,容易搞混的就是他和react-router-dom的区别,区别就是react-router-dom中多了Link BrowserRouter 这样的 DOM 类组件,至于router和route都是一样的。
- react-router-dom 浏览器端使用的router
- react-router-redux 和redux集成使用时会用到
react-router中路由分类
BrowserRouter
基于html5提供的,history API(pushState, replaceState 和 popstate 事件) 来保持 UI 和 URL 的同步。大致流程就是使用history.pushState塞历史记录到浏览器中,监听window.onpopstate事件,url变化的时候render对应组件HashRouter
HashRouter 是一种特定的 ， HashRouter 使用 URL 的 hash (例如：window.location.hash) 来保持 UI 和 URL 的同步。大致流程是直接给window.location.hash赋值,监听hashchange事件,hash变化时,render对应的组件
MemoryRouter
保存'url'历史记录在内存中,在demo测试或者 React Native等非browser环境下使用StaticRouter
服务端渲染中会用到
路由使用
就拿 HashRouter 使用来作为示例, 其它使用形式上类似,多说一句话Hash除了今天说的路由用途之外,还可以做锚点定位。
import React, { Component } from 'react';
import {BrowserRouter as Router, Route, Link,Switch,Redirect} from 'react-router-dom'
class App extends Component {
render() {
return (
home //link 本质实现其实就是一个a链接
about
list
// 匹配到第一个匹配的路由就停止
list} /> //写法2
);
}
}
const Home = () => {
return home page
}
const About = () => (
About
);
export default App;
-------------------------
//关于Router导入还有一种等价的使用方式,如下所示
import createHistory from 'history/createHashHistory'
里面的内容同上
说明 在react-router-dom内部包含很多组件,例如route,link,switch等等,更多组件请参考 这里。上面只是一个简单的实例,实现简单的路由跳转,关于说明都放在注释里了。
路由剖析
在上面的示例中,Router是转发的枢纽,在这个中转站有很多线路(Route),通过开关(Link)可以启动列车的运行,乘坐列车就可以发现新大陆(compontent) 。深入进去可以发现Router只是提供了一个上下文环境, 具体的路由功能的实现依靠传入的history属性, 这个属性的功能由history模块提供,history模块里面封装了createBrowserHistory,createHashHistory,createMemoryHistory等等。因为所有模块提供的功能接口一样 所以我们以其中的createHashHistory模块作为示例分析下, 首先其提供的接口如下
const history = {
length: globalHistory.length, //历史记录数量 window.history.length
action: "POP", //操作表示 可以为REPLACE PUSH
location: initialLocation, //内部封装的简版window.location
createHref, //创建一个hash路由
push,
replace,
go, // window.history.go(n);
goBack, // go(-1);
goForward, //go(1);
block, // 地址变化,离开当前页时设置提示信息
listen
};
return history;下面选出几个比较重要的详细说明下
push
// const pushHashPath = path => (window.location.hash = path);说明 摘出的主要逻辑添加浏览器hash地址
replace 更换浏览器hash地址
const hashIndex = window.location.href.indexOf("#");
window.location.replace(
window.location.href.slice(0, hashIndex >= 0 ? hashIndex : 0) + "#" + path
);说明 摘出的主要逻辑更换浏览器hash地址
listen
const listen = listener => {
const unlisten = transitionManager.appendListener(listener);
checkDOMListeners(1);
return () => {
checkDOMListeners(-1);
unlisten();
};
};
说明 在transitionManager实例中维护了一个listener数组,appendListener添加一个Listener, checkDOMListeners是绑定事件
window.addEventListener(HashChangeEvent, handleHashChange);每当location地址改变,HashChangeEvent触发的时候, 会取出listeners然后执行,如下所示
transitionManager.notifyListeners(history.location, history.action);block
const unblock = transitionManager.setPrompt(prompt);//注册提示信息
unblock() //执行后解除地址变化时提示信息
总结
断断续续的终于把这篇文章写好了,在此期间看了history源码,写了一些示例,尽可能将自己理解的东西以简洁直白的方式输出出来,希望大家看后能产生共鸣。
参考源码
history 4.7.2
react-router 4.3.0-rc.2
参考链接
http://reacttraining.cn/web/a...
https://juejin.im/post/5995a2...