精通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、完成

有什么问题可以留言回复哦！！！

巴特西