router@4.0 使用方法和源码分析(2)

import Router from './Router' import {createHistory} from 'history' var HashRouter = function (_React$Component) { function HashRouter() { var _temp, _this, _ret; //参数转换为数组 for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { args[_key] = arguments[_key]; } return _ret = ( _temp = (_this = _possibleConstructorReturn(this, _React$Component.call.apply(_React$Component, [this].concat(args))), _this), _this.history = createHistory(_this.props), _temp), //创建history _possibleConstructorReturn(_this, _ret); //真正返回的东西 返回this } HashRouter.prototype.render = function render() { // 返回一个Router,并且把history，children传递给Router return React.createElement(Router, { history: this.history, children: this.props.children }); }; return HashRouter; }(React.Component);

总结 通过 history库里面 createHistory 创建路由系统

第四部 Router react-router

var Router = function (_React$Component) { function Router() { var _temp, _this, _ret; //获取参数，和其他组件一样 for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { args[_key] = arguments[_key]; } return _ret = (_temp = (_this = _possibleConstructorReturn(this, _React$Component.call.apply(_React$Component, [this].concat(args))), _this), _this.state = { match: _this.computeMatch(_this.props.history.location.pathname) //返回路由对象 }, _temp), _possibleConstructorReturn(_this, _ret); //返回this } // 返回context Router.prototype.getChildContext = function getChildContext() { return { router: _extends({}, this.context.router, { history: this.props.history, route: { location: this.props.history.location, match: this.state.match } }) }; }; Router.prototype.computeMatch = function computeMatch(pathname) { return { path: "https://www.jb51.net/", url: "https://www.jb51.net/", params: {}, isExact: pathname === "https://www.jb51.net/" }; }; Router.prototype.componentWillMount = function componentWillMount() { var _this2 = this; var _props = this.props, children = _props.children, history = _props.history; // 启动监听 当hash 改变是做一次检查，并返回unlisten 取消事件 this.unlisten = history.listen(function () { _this2.setState({ match: _this2.computeMatch(history.location.pathname) }); }); }; //销毁前取消监听 Router.prototype.componentWillUnmount = function componentWillUnmount() { this.unlisten(); }; // children是HashRouter 传递进来的 Router.prototype.render = function render() { var children = this.props.children; return children ? React.Children.only(children) : null; }; return Router; }(React.Component);

总结 history是一个JavaScript库，可让您在JavaScript运行的任何地方轻松管理会话历史记录。history抽象出各种环境中的差异，并提供最小的API，使您可以管理历史堆栈，导航，确认导航以及在会话之间保持状态。

第五部 withRouter <react-router>

var withRouter = function withRouter(Component) { var C = function C(props) { //获取props var wrappedComponentRef = props.wrappedComponentRef, remainingProps = _objectWithoutProperties(props, ["wrappedComponentRef"]); // Route 组件 children方式 return React.createElement(Route, { children: function children(routeComponentProps) { // 这里使用的是route 组件 children(props) //routeComponentProps 实际等于 { match: match, location: location, history: history, staticContext: staticContext }; return React.createElement(Component, _extends({}, remainingProps, routeComponentProps, { ref: wrappedComponentRef })); } }); }; C.displayName = "withRouter(" + (Component.displayName || Component.name) + ")"; C.WrappedComponent = Component; // 该类似于object.assign(C,Component),得到的结果是C return hoistStatics(C, Component); };

到这里真个流程基本结束了，这只是react-router的一种使用方式的解析,本文的目的是理解react-router的运行机制,如果有什么错误还望指出,谢谢