共计 15588 个字符，预计需要花费 39 分钟才能阅读完成。
这篇文章主要讲的是分析 react-router 源码，版本是 v5.x，以及 SPA 路由实现的原理。
文章首发地址
单页面应用都用到了路由 router，目前来看实现路由有两种方法 hash 路由和 H5 History API 实现。
而 react-router 路由，则是用到了 history 库，该库其实是对 hash 路由、history 路由、memory 路由（客户端）进行了封装。
下面先看看 hash 和 history 是怎样实现路由的。
hash router
hash 是 location 的属性，在 URL 中是 #后面的部分。如果没有 #，则返回空字符串。
hash 路由主要实现原理是：hash 改变时，页面不发生跳转，即 window 对象可以对 hash 改变进行监听（hashchange 事件），只要 url 中 hash 发生改变，就会触发回调。
利用这个特性，下面模拟实现一个 hash 路由。
实现步骤：
- 初始化一个类
- 记录路由、history 历史值
- 添加 hashchange 事件，hash 发生改变时，触发回调
- 初始添加所有路由
- 模拟前进和回退功能
代码如下：
hash.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>hash router</title>
</head>
<body>
<ul>
<li><a href="#/">turn yellow</a></li>
<li><a href="#/blue">turn blue</a></li>
<li><a href="#/green">turn green</a></li>
</ul>
<button id='back'>back</button>
<button id='forward'>forward</button>
<script src="./hash.js"></script>
</body>
</html>hash.js
class Routers {constructor() {this.routes = {}
this.currentUrl = ''
this.history = []; // 记录 hash 历史值
this.currentIndex = this.history.length - 1; // 默认指向 history 中最后一个
// 默认前进、后退
this.isBack = false;
this.isForward = false;
this.onHashChange = this.onHashChange.bind(this)
this.backOff = this.backOff.bind(this)
this.forward = this.forward.bind(this)
window.addEventListener('load', this.onHashChange, false);
window.addEventListener('hashchange', this.onHashChange, false); // hash 变化监听事件，support >= IE8
}
route(path, callback) {this.routes[path] = callback || function () {}
}
onHashChange() {
// 既不是前进和后退，点击 a 标签时触发
if (!this.isBack && !this.isForward) {this.currentUrl = location.hash.slice(1) || '/'
this.history.push(this.currentUrl)
this.currentIndex++
}
this.routes[this.currentUrl]()
this.isBack = false
this.isForward = false
}
// 后退功能
backOff() {
this.isBack = true
this.currentIndex = this.currentIndex <= 0 ? 0 : this.currentIndex - 1
this.currentUrl = this.history[this.currentIndex]
location.hash = `#${this.currentUrl}`
}
// 前进功能
forward() {
this.isForward = true
this.currentIndex = this.currentIndex >= this.history.length - 1 ? this.history.length - 1 : this.currentIndex + 1
this.currentUrl = this.history[this.currentIndex]
location.hash = `#${this.currentUrl}`
}
}
// 初始添加所有路由
window.Router = new Routers();
Router.route('/', function () {changeBgColor('yellow');
});
Router.route('/blue', function () {changeBgColor('blue');
});
Router.route('/green', function () {changeBgColor('green');
});
const content = document.querySelector('body');
const buttonBack = document.querySelector('#back');
const buttonForward = document.querySelector('#forward')
function changeBgColor(color) {content.style.backgroundColor = color;}
// 模拟前进和回退
buttonBack.addEventListener('click', Router.backOff, false)
buttonForward.addEventListener('click', Router.forward, false)hash 路由兼容性好，缺点就是实现一套路由比较复杂些。
在线预览
history router
history 是 HTML5 新增的 API，允许操作浏览器的曾经在标签页或者框架里访问的会话历史记录。
history 包含的属性和方法：
-
history.state读取历史堆栈中最上面的值 -
history.length浏览历史中元素的数量 -
window.history.replaceState(obj, title, url)取代当前浏览历史中当前记录 -
window.history.pushState(obj, title, url)往浏览历史中添加历史记录，不跳转页面 -
window.history.popstate(callback)对历史记录发生变化进行监听，state 发生改变时，触发回调事件 -
window.history.back()后退，等价于浏览器返回按钮 -
window.history.forward()前进，等价于浏览器前进按钮 -
window.history.go(num)前进或后退几个页面，num为负数时，后退几个页面
实现步骤：
- 初始化一个类
- 记录路由
- 添加
popstate事件，state 发生改变时，触发回调 - 初始添加所有路由
代码如下：
history.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>h5 router</title>
</head>
<body>
<ul>
<li><a href="/">turn yellow</a></li>
<li><a href="/blue">turn blue</a></li>
<li><a href="/green">turn green</a></li>
</ul>
<script src='./history.js'></script>
</body>
</html>history.js
class Routers {constructor() {this.routes = {};
this._bindPopState();}
route(path, callback) {this.routes[path] = callback || function () {};
}
go(path) {history.pushState({ path: path}, null, path);
this.routes[path] && this.routes[path]();}
_bindPopState() {
window.addEventListener('popstate', e => { // 监听 history.state 改变
const path = e.state && e.state.path;
this.routes[path] && this.routes[path]();});
}
}
// 初始时添加所有路由
window.Router = new Routers();
Router.route('/', function () {changeBgColor('yellow');
});
Router.route('/blue', function () {changeBgColor('blue');
});
Router.route('/green', function () {changeBgColor('green');
});
const content = document.querySelector('body');
const ul = document.querySelector('ul');
function changeBgColor(color) {content.style.backgroundColor = color;}
ul.addEventListener('click', e => {if (e.target.tagName === 'A') {
debugger
e.preventDefault();
Router.go(e.target.getAttribute('href'));
}
});
兼容性：support >= IE10
在线预览
react-router
react-router 分为四个包，分别为 react-router、react-router-dom、react-router-config、react-router-native，其中 react-router-dom 是浏览器相关 API，react-router-native 是 React-Native 相关 API，react-router 是核心也是共同部分 API，react-router-config 是一些配置相关。
react-router 是 React 指定路由，内部 API 的实现也是继承 React 一些属性和方法，所以 react-router 内 API 也是 React 组件。
react-router 还用到了 history 库，这个库主要是对 hash 路由、history 路由、memory 路由的封装。
下面我们讲到的是 react-router v5.x 版本，用到了 context，context 减少了组件之间显性传递 props，具体用法可以看看官方文档。
创建 context:
var createNamedContext = function createNamedContext(name) {var context = createContext();
context.displayName = name;
return context;
};
var context = createNamedContext("Router");Router
定义一个类 Router，它继承 React.Component 属性和方法，所以 Router 也是 React 组件。
_inheritsLoose(Router, _React$Component);
// 等价于
Router.prototype = Object.create(React.Component) 在 Router 原型对象上添加 React 生命周期 componentDidMount、componentWillUnmount、render 方法。
一般情况下，Router 都是作为 Route 等其他子路由的上层路由，使用了 context.Provider，接收一个 value 属性，传递 value 给消费子组件。
var _proto = Router.prototype;
_proto.componentDidMount = function componentDidMount() {// todo};
_proto.componentWillUnmount = function componentWillUnmount(){// todo};
_proto.render = function render() {return React.createElement(context.Provider, props);
};
history 库中有个方法 history.listen(callback(location)) 对 location 进行监听，只要 location 发生变化了，就会 setState 更新 location，消费的子组件也可以拿到更新后的 location，从而渲染相应的组件。
核心源码如下：
var Router =
function (_React$Component) {
// Router 从 React.Component 原型上的继承属性和方法
_inheritsLoose(Router, _React$Component);
Router.computeRootMatch = function computeRootMatch(pathname) {
return {
path: "/",
url: "/",
params: {},
isExact: pathname === "/"
};
};
function Router(props) { // 首先定义一个类 Router，也是 React 组件
var _this;
_this = _React$Component.call(this, props) || this; // 继承自身属性和方法
_this.state = {location: props.history.location};
_this._isMounted = false;
_this._pendingLocation = null;
if (!props.staticContext) { // 如果不是 staticRouter，则对 location 进行监听
_this.unlisten = props.history.listen((location) => { // 监听 history.location 变化，如果有变化，则更新 locaiton
if (_this._isMounted) {
_this.setState({location: location});
} else {_this._pendingLocation = location;}
});
}
return _this;
}
var _proto = Router.prototype; // 组件需要有生命周期，在原型对象上添加 componentDidMount、componentWillUnmount、render 方法
_proto.componentDidMount = function componentDidMount() {
this._isMounted = true;
if (this._pendingLocation) {
this.setState({location: this._pendingLocation});
}
};
_proto.componentWillUnmount = function componentWillUnmount() {if (this.unlisten) this.unlisten(); // 停止监听 location};
_proto.render = function render() {
// 使用了 React Context 传递 history、location、match、staticContext，使得所有子组件都可以获取这些属性和方法
// const value = {
// history: this.props.history,
// location: this.state.location,
// match: Router.computeRootMatch(this.state.location.pathname),
// staticContext: this.props.staticContext
// }
// return (// <context.Provider value={value}>
// {this.props.children}
// </context.Provider>
// )
return React.createElement(context.Provider, {
children: this.props.children || null,
value: {
history: this.props.history,
location: this.state.location,
match: Router.computeRootMatch(this.state.location.pathname),
staticContext: this.props.staticContext // staticContext 是 staticRouter 中的 API，不是公用 API
}
});
};
return Router;
}(React.Component);Route
Route 一般作为 Router 的子组件，主要是匹配 path 和渲染相应的组件。
Route 使用了 context.Consumer（消费组件），订阅了 Router 提供的 context，一旦 location 发生改变，context 也会改变，判断当前 location.pathname 是否与子组件的 path 是否匹配，如果匹配，则渲染对应组件，否则就不渲染。
Route 因为有些库传递组件方式不同，所以有多种渲染，部分代码如下：
const {children, render, component} = this.props
let renderEle = null;
// 如果有 children，则渲染 children
if (children && !isEmptyChildren(children)) renderEle = children
// 如果组件传递的是 render 及 match 是匹配的，则渲染 render
if (render && match) renderEle = render(props)
// 如果组件传递 component 及 match 是匹配的，则渲染 component
if (component && match) renderEle = React.createElement(component, props)
return (<context.Provider value={obj}>
{renderEle}
</context.Provider>
)核心源码如下：
var Route =
function (_React$Component) {_inheritsLoose(Route, _React$Component);
function Route() {return _React$Component.apply(this, arguments) || this;
}
var _proto = Route.prototype;
_proto.render = function render() {
var _this = this;
// context.Consumer 每个 Route 组件都可以消费 Router 中 Provider 提供的 context
return React.createElement(context.Consumer, null, function (context$$1) {
var location = _this.props.location || context$$1.location;
var match = _this.props.computedMatch ? _this.props.computedMatch
: _this.props.path ? matchPath(location.pathname, _this.props) : context$$1.match; // 是否匹配当前路径
var props = _extends({}, context$$1, { // 处理用 context 传递的还是自己传递的 location 和 match
location: location,
match: match
});
var _this$props = _this.props,
children = _this$props.children,
component = _this$props.component,
render = _this$props.render;
if (Array.isArray(children) && children.length === 0) {children = null;}
// let renderEle = null
// 如果有 children，则渲染 children
// if (children && !isEmptyChildren(children)) renderEle = children
// 如果组件传递的是 render 及 match 是匹配的，则渲染 render
// if (render && props.match) renderEle = render(props)
// 如果组件传递 component 及 match 是匹配的，则渲染 component
// if (component && props.match) renderEle = React.createElement(component, props)
// return (// <context.Provider value={props}>
// {renderEle}
// </context.Provider>
// )
return React.createElement(context.Provider, { // Route 内定义一个 Provider，给 children 传递 props
value: props
}, children && !isEmptyChildren(children) ? children : props.match ? component ? React.createElement(component, props) : render ? render(props) : null : null);
});
};
return Route;
}(React.Component);Redirect
重定向路由：from 是从哪个组件来，to 表示要定向到哪里。
<Redirect from="home" to="dashboard" /> 根据有没传属性 push，有传则是往 state 堆栈中新增（history.push），否则就是替代（history.replace）当前 state。
Redirect 使用了 context.Consumer（消费组件），订阅了 Router 提供的 context，一旦 location 发生改变，context 也会改变，则也会触发重定向。
源码如下：
function Redirect(_ref) {
var computedMatch = _ref.computedMatch,
to = _ref.to,
_ref$push = _ref.push,
push = _ref$push === void 0 ? false : _ref$push;
return React.createElement(context.Consumer, null, (context$$1) => { // context.Consumer 第三个参数是一个函数
var history = context$$1.history,
staticContext = context$$1.staticContext;
// method 方法：判断是否是替换（replace）当前的 state，还是往 state 堆栈中添加（push) 一个新的 state
var method = push ? history.push : history.replace;
// 生成新的 location
var location = createLocation(computedMatch ? typeof to === "string" ? generatePath(to, computedMatch.params) : _extends({}, to, {pathname: generatePath(to.pathname, computedMatch.params)
}) : to);
if (staticContext) {// 当渲染一个静态的 context 时（staticRouter)，立即设置新 location
method(location);
return null;
}
// Lifecycle 是一个 return null 的空组件，但定义了 componentDidMount、componentDidUpdate、componentWillUnmount 生命周期
return React.createElement(Lifecycle, {onMount: function onMount() {method(location);
},
onUpdate: function onUpdate(self, prevProps) {var prevLocation = createLocation(prevProps.to);
// 触发更新时，对比前后 location 是否相等，不相等，则更新 location
if (!locationsAreEqual(prevLocation, _extends({}, location, {key: prevLocation.key}))) {method(location);
}
},
to: to
});
});
}Switch
Switch 组件的子组件必须是 Route 或 Redirect 组件。
Switch 使用了 context.Consumer（消费组件），订阅了 Router 提供的 context，一旦 location 发生改变，context 也会改变，判断当前 location.pathname 是否与子组件的 path 是否匹配，如果匹配，则渲染对应的子组件，其他都不渲染。
源码如下：
var Switch =
function (_React$Component) {_inheritsLoose(Switch, _React$Component);
function Switch() {return _React$Component.apply(this, arguments) || this;
}
var _proto = Switch.prototype;
_proto.render = function render() {
var _this = this;
return React.createElement(context.Consumer, null, function (context$$1) {
var location = _this.props.location || context$$1.location;
var element, match;
React.Children.forEach(_this.props.children, function (child) {if (match == null && React.isValidElement(child)) {
element = child;
var path = child.props.path || child.props.from;
match = path ? matchPath(location.pathname, _extends({}, child.props, {path: path})) : context$$1.match;
}
});
return match ? React.cloneElement(element, {
location: location,
computedMatch: match // 加强版的 match
}) : null;
});
};
return Switch;
}(React.Component);Link
Link 组件作用是跳转到指定某个路由。Link 实际是对 <a> 标签进行了封装。
点击时会触发以下：
- 改变 url，但使用了
e.preventDefault()，所以页面没有发生跳转。 - 根据是否传递属性 replace，有传就是替代当前 state（
history.replace），否则是往 state 堆栈中新增（history.push），从而路由发生了改变。 - 路由发生了改变，由于 Router 中有对 location 进行监听，从而通过 context 传递给消费子组件，匹配 path 是否相同，渲染相应的组件。
核心源码如下：
function LinkAnchor(_ref) {
var innerRef = _ref.innerRef,
navigate = _ref.navigate,
_onClick = _ref.onClick,
rest = _objectWithoutPropertiesLoose(_ref, ["innerRef", "navigate", "onClick"]); // 剩余属性
var target = rest.target;
return React.createElement("a", _extends({}, rest, { // a 标签
ref: innerRef ,
onClick: function onClick(event) {
try {if (_onClick) _onClick(event);
} catch (ex) {event.preventDefault(); // 使用 e.preventDefault() 防止跳转
throw ex;
}
if (!event.defaultPrevented && // onClick prevented default
event.button === 0 && ( // ignore everything but left clicks
!target || target === "_self") && // let browser handle "target=_blank" etc.
!isModifiedEvent(event) // ignore clicks with modifier keys
) {event.preventDefault();
navigate(); // 改变 location}
}
}));
}
function Link(_ref2) {
var _ref2$component = _ref2.component,
component = _ref2$component === void 0 ? LinkAnchor : _ref2$component,
replace = _ref2.replace,
to = _ref2.to, // to 跳转链接的路径
rest = _objectWithoutPropertiesLoose(_ref2, ["component", "replace", "to"]);
return React.createElement(__RouterContext.Consumer, null, function (context) {
var history = context.history;
// 根据 to 生成新的 location
var location = normalizeToLocation(resolveToLocation(to, context.location), context.location);
var href = location ? history.createHref(location) : "";
return React.createElement(component, _extends({}, rest, {
href: href,
navigate: function navigate() {var location = resolveToLocation(to, context.location);
var method = replace ? history.replace : history.push;
method(location); // 如果有传 replace，则是替换掉当前 location，否则往 history 堆栈中添加一个 location
}
}));
});
}BrowserRouter
BrowserRouter 用到了 H5 history API，所以可以使用 pushState、replaceState 等方法。
源码中主要是用到了 history 库 createBrowserHistory 方法创建了封装过 history 对象。
把封装过的 history 对象传递给 Router 的 props。
var BrowserRouter =
function (_React$Component) {_inheritsLoose(BrowserRouter, _React$Component); // BrowserRouter 继承 React.Component 属性和方法
function BrowserRouter() {
var _this;
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];
}
_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this; // 继承自身属性和方法
_this.history = createBrowserHistory(_this.props); // 创建 browser history 对象，是支持 HTML 5 的 history API
return _this;
}
var _proto = BrowserRouter.prototype;
_proto.render = function render() {
return React.createElement(Router, { // 以 Router 为 element，history 和 children 作为 Router 的 props
history: this.history,
children: this.props.children
});
};
return BrowserRouter;
}(React.Component);HashRouter
HashRouter 与 BrowserRouter 的区别，主要是创建是以 window.location.hash 为对象，返回一个 history，主要是考虑到兼容性问题。
var HashRouter =
function (_React$Component) {_inheritsLoose(HashRouter, _React$Component);
function HashRouter() {
var _this;
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];
}
_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
_this.history = createHashHistory(_this.props); // 创建 hash history 对象，兼容老浏览器 hash，其他和 BrowserRouter 没有大区别
return _this;
}
var _proto = HashRouter.prototype;
_proto.render = function render() {
return React.createElement(Router, {
history: this.history,
children: this.props.children
});
};
return HashRouter;
}(React.Component);
总结
- react-router 分为四个包，分别为
react-router、react-router-dom、react-router-config、react-router-native，其中react-router-dom是浏览器相关 API，react-router-native是 React-Native 相关 API，react-router是核心也是共同部分 API，react-router-config是一些配置相关。 - react-router 是 React 指定路由，内部 API 的实现也是继承 React 一些属性和方法，所以说 react-router 内 API 也是 React 组件。
- react-router 还用到了 history 库，这个库主要是对 hash 路由、history 路由、memory 路由的封装。
- Router 都是作为 Route 等其他子路由的上层路由，使用了
context.Provider，接收一个 value 属性，传递 value 给消费子组件。 - history 库中有个方法
history.listen(callback(location))对 location 进行监听，点击某个 Link 组件，改变了 location，只要 location 发生变化了，通过 context 传递改变后的 location，消费的子组件拿到更新后的 location，从而渲染相应的组件。
参考
- react-router github
- history github
- 寻找海蓝 96【你了解前端路由吗？】
- History MDN
正文完
发表至： javascript
2019-07-10
