蝙蝠岛资源网 Design By www.hbtsch.com
react-router-dom@4.3.0 || react-router@4.4.1
react-router 使用方法
配置 router.js
import React, { Component } from 'react'; import { Switch, Route } from 'react-router-dom'; const router = [{ path: '/', exact: true, component:importPath({ loader: () => import(/* webpackChunkName:"home" */ "pages/home/index.js"), }), },] const Routers = () => ( <main> <Switch> { router.map(({component,path,exact},index)=>{ return <Route exact={exact} path={path} component={component} key={path} /> }) } </Switch> </main> ); export default Routers;
入口 index.js
import {HashRouter} from 'react-router-dom'; import React from 'react'; import ReactDOM from 'react-dom'; import Routers from './router'; ReactDOM.render ( <HashRouter> <Routers /> </HashRouter>, document.getElementById ('App') );
home.js
import { withRouter } from "react-router-dom"; @withRouter class Home extends React.Component<PropsType, stateType> { constructor(props: PropsType) { super(props); this.state = {}; } goPath=()=>{ this.props.history.push('/home') } render() { return ( <div onClick={this.goPath}>home</div> ); } export default Home;
react-router 源码解析
下面代码中会移除部分的类型检查和提醒代码,突出重点代码
第一步 Switch react-router
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } if(call&&(typeof call === "object" || typeof call === "function") ){ return call }else { return self } } var Switch = function (_React$Component) { function Switch() { //使用传递进来的组件覆盖本身 return _possibleConstructorReturn(this, _React$Component.apply(this, arguments)); } Switch.prototype.render = function render() { var route = this.context.router.route; var children = this.props.children; var location = this.props.location || route.location; var match = void 0,child = void 0; //检查element是否是react组件,初始match为null, React.Children.forEach(children, function (element) { //如果match符合,forEach不会进入该if if (match == null && React.isValidElement(element)) { var _element$props = element.props, pathProp = _element$props.path, exact = _element$props.exact, strict = _element$props.strict, sensitive = _element$props.sensitive, from = _element$props.from; var path = pathProp || from; child = element; //检查当前配置是否符合, match = matchPath(location.pathname, { path: path, exact: exact, strict: strict, sensitive: sensitive }, route.match); } }); //如果有匹配元素,则返回克隆child return match "htmlcode">var Route = function (_React$Component) { function Route() { var _temp, _this, _ret; //获取参数 for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { args[_key] = arguments[_key]; } //修改this return _ret = ( _temp = (_this = _possibleConstructorReturn(this, _React$Component.call.apply(_React$Component, [this].concat(args))), _this), //检查当前元素是否符合match _this.state = {match: _this.computeMatch(_this.props,_this.context.router)},_temp), //这里是真正return _possibleConstructorReturn(_this, _ret); } // 设置content Route.prototype.getChildContext = function getChildContext() { return { router: _extends({}, this.context.router, { route: { location: this.props.location || this.context.router.route.location, match: this.state.match } }) }; }; // 根据参数检查当前元素是否符合匹配规则 Route.prototype.computeMatch = function computeMatch(_ref, router) { var computedMatch = _ref.computedMatch, location = _ref.location, path = _ref.path, strict = _ref.strict, exact = _ref.exact, sensitive = _ref.sensitive; if (computedMatch) return computedMatch; var route = router.route; var pathname = (location || route.location).pathname; return matchPath(pathname, { path: path, strict: strict, exact: exact, sensitive: sensitive }, route.match); }; // 设置match Route.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps, nextContext) { this.setState({ match: this.computeMatch(nextProps, nextContext.router) }); }; Route.prototype.render = function render() { var match = this.state.match; var _props = this.props, children = _props.children, component = _props.component, render = _props.render; var _context$router = this.context.router, history = _context$router.history, route = _context$router.route, staticContext = _context$router.staticContext; var location = this.props.location || route.location; var props = { match: match, location: location, history: history, staticContext: staticContext }; //检查route 是否有component组 if (component) return match "function") return children(props); if (children && !isEmptyChildren(children)) return React.Children.only(children); return null; }; return Route; }(React.Component);总结:route 渲染的方式: component render children,代码示例用的是component,route 是检查当前组件是否符合路由匹配规则并执行创建过程
第三步 HashRouter react-router-dom
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: "/", url: "/", params: {}, isExact: pathname === "/" }; }; 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 "htmlcode">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的运行机制,如果有什么错误还望指出,谢谢
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
蝙蝠岛资源网 Design By www.hbtsch.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
蝙蝠岛资源网 Design By www.hbtsch.com
暂无浅谈react-router@4.0 使用方法和源码分析的评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新日志
2024年12月28日
2024年12月28日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]