写给vue转react的同志们（6）

window.onhashchange = () => {
    let hash = location.hash
    console.log(hash)
}

window.onpopstate = function(event) {
  alert("location: " + document.location + ", state: " + JSON.stringify(event.state))
}

class vueRouter {
    constructor(options) {
        // 配置选项
        this.$options = options
        // 路由映射关系
        this.routeMap = {}
        // 将 Vue 实例储存起来用于响应式
        this.app = new Vue({
            data() {
                return {
                    current: '/'
                }
            }
        })
    }
}

vueRouter.install = (_Vue) => {
    // 将 Vue 类存起来
    Vue = _Vue
    // 注册全局混入将该生命周期混入到全局用于初始化
    Vue.mixin({
        created() {
            if(this.$options.router) {
                this.$router = this.$options.router
                // init 初始化路由 
                // this.$options 是 new Vue() 时传入的参数
                this.$options.router.init()
            }
        }
    })
}

initEvent() {
    // 监听浏览器的hashchange和load事件，使用bind改变this指向
    window.addEventListener('hashchange', this.handleHashChange.bind(this))
    window.addEventListener('load', this.handleHashChange.bind(this))
}

handleHashChange() {
    // 获取#后面的部分赋值给app的current
    this.app.current = location.hash.slice(1)
}

initRouteMap() {
    // 路由映射关系对应
    this.$options.routes.forEach(item => {
      this.routeMap[item.path] = item
    })
}

registerComponents() {
    // router-link 用于点击跳转
    Vue.component('v-router-link', {
      props: {
        to: String
      },
      render: function (h) {
        return h('a', { attrs: { href: `#${this.to}` } }, this.$slots.default)
      }
    })

    // router-view 展示当前路由对应组件即可
    Vue.component('v-router-view', {
        render: h => {
            const com = this.routeMap[this.app.current].component

            return h(com)
          }
    })
}

// 初始化方法
init() {
    this.initEvent()
    this.initRouteMap()
    this.registerComponents()
}

// main.js
import Vue from 'vue'
import vueRouter from './vueRouter'
import xxx from './xxx'
import home from './home'

Vue.use(vueRouter)

export default new vueRouter({
    routes:[{
        path: '/home',
        component: home
    },
    {
        path: '/xxx',
        component: xxx
    }]
})

// home.vue
<template>
    <div id='app'>
        <v-router-link to='/xxx'>xxx</v-router-link>
        <v-router-view />
    </div>
</template>

//context.js
import React from "react"
export default React.createContext()

// hashRouter.js
import React, { Component } from "react"
import Context from "./context" // 引入上下文对象

export default class hashRouter extends Component {
    constructor(props) {
        super(props)
        // 将状态存入 state 中方便修改。
        this.state = {
            location: {
                // 获取浏览器地址栏中的hash值，如果不存在则默认为"/"
                pathname: window.location.hash.slice(1) || "/", 
                query: undefined
            }
            // 用于实现当前路由的切换
            history: {
                push: (to) => {
                    if (typeof to === "object") {
                        // 如果参数是对象的情况：
                        let { pathname, query } = to
                        window.location.hash = pathname // 更新浏览器hash值，触发浏览器hashchange事件
                        this.state.location.query = query // 更新query
                    } else {
                        // 如果参数是路径：
                        window.location.hash = to // 更新浏览器hash值
                    }
                }
            }
        }
     }
    componentDidMount() {
        window.addEventListener("hashchange", () => { // 监听浏览器地址栏hash值变化
            this.setState({ // 当hash值变化后更新当前路由信息, HashRouter组件内的子组件Route将会重新渲染
                location: {
                    ...this.state.location,
                    pathname: window.location.hash.slice(1) // 更新pathname
                }
            })
        })
    }
     render() {
        // 当前路由对象
        const currentRoute = {}
        return (
             // 使用 Provider 组件将当前路由信息对象注入上下文中，以便其 Route 等子组件能够获取到当前路由信息
            <Context.Provider value={currentRoute}>
                {this.props.children}
            </Context.Provider>
        )
    }
}

// Route.js
import React, { Component } from "react"
import context from "./context"

export default class Route extends Component {
    static contextType = context
    render() {
        const currentRoutePath = this.context.location.pathname // 从上下文中获取到当前路由的路径
        const { path, component:Component } = this.props // 获取给 Route 传递的 props 属性
        const props = {
            ...this.context
        }
        // 匹配路径
        if (currentRoutePath === path) {
            return (
                <Component {...props}></Component>
            )
        }
        return null
    }
}

// router.js
import Route from './Route.js'
const router = (
    <Route
        path='/'
        component = () => import('./home.jsx')
    />
    <Route
        path='/xxx'
        component = () => import('./xxx.jsx')
    />
)
export default router

// main.js
import React from 'react'
import router from './router.js'
class App extends React.Component { 
  constructor(props) {
    super(props)
    this.state = {
        // init something ...
    }
  }
  render() {
      <div>
          {router}
      </div>
  }
}