精通react之react-router4源码分析,100代码实现router功能
1、react-router4
是一个 react 组件
通过和 location / histroy 结合,来显示页面不同URL对应显示不同的组件
其中包含了三种路由。hash / boswer 等
2、react-router基本原理
要对 history 进行解析和封装
要对 history/location 的改变进行监听
当 history/locaiton 改变触发 组件的路由检测
最后对应的渲染匹配的组件
3、实现
根据以上的分析。
我们可以开始实现基础模型代码
创建要给 Router.js 组件
this.state = { children: null } // 这里是我们要渲染的子组件 // 匹配好的组件组装后显示
componentWillMount() { let {children} = this.props const {pathnpame} = window.location children = this.checkRouter(children, pathname) this.setState({ children }) } // 因为是模型代码 // 所以我之写初次进入的代码 // 在这里我们拦截 componentWillMount // 根据 pathnpame ,children 实现检测和匹配 // checkRouter 匹配检测函数
function checkRouter(childrens, pathname) { childrens.forEach((item, index) => { const {props, type} = item if (Object.prototype.toString.call(type) == '[object Function]' && type.name == 'Route') { let {extra, path, children} = props console.log(item) if (path !== pathname && !extra) { childrens[index].props.children= null } else { if (new RegExp(`^${path}`).test(pathname)) { let {children} = props if (Object.prototype.toString.call(children) == '[object Array]') { childrens[index].props.children = checkRouter(children, pathname) } } else { childrens[index].props.children= null } } } else { let {children} = props if (Object.prototype.toString.call(children) == '[object Array]') { childrens[index].props.children = checkRouter(children, pathname) } } }) return childrens }
// 这里是匹配具体的规则
// 代码不多,自己理解吧
在创建一个 route.js
route.js 只要实现返回 子组件就 OK 了
4、调用
<Router> <div>1</div> <Text> <div>3</div> <Route path='/test2'>7</Route> </Text> <Route path='/test'>4</Route> <Route extra path='/switch'> <div>2</div> <Route path='/switch/one'>5</Route> <Route path='/switch/two'> <div>6</div> </Route> </Route> </Router>
5、完成
有什么问题可以留言回复哦!!!