React-router 简单实现

作者: ITtian | 来源:发表于2017-08-25 18:22 被阅读8次

React-router 简单实现
React Router-简单原理
react-router 入门笔记
react-实现一个简单的页面转跳路由
简易手写react-router(函数式组件)
react-router 的实现原理
react js实现路由跳转
webpack+react 项目实践和暂不极致优化
React路由
react-router和PureComponent

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>router</title>
</head>
<body>
    <ul>
        <li><a href="#/">turn white</a></li>
        <li><a href="#/blue">turn blue</a></li>
        <li><a href="#/green">turn green</a></li>
    </ul>
<script>
    // 路由类
    function Router(){
        this.routes = {}
        this.currentUrl = ''
    }

    Router.prototype = {
      constructor: Router,
      router: function(data){
          for(var item of data){
              this.routes[item.path] = item.getComponent || function (){}
          }

      },
      refresh: function(){
          console.log(this)
          this.currentUrl = location.hash.slice(1) || '/'
          this.routes[this.currentUrl]()
      },
      init: function (){
          window.addEventListener('load',this.refresh.bind(this),false)
          window.addEventListener('hashchange',this.refresh.bind(this),false)
      }
    }

    window.Router = new Router()
    // 注册路由改变事件
    window.Router.init()

    var content = document.querySelector('body')

    function changeBgColor(color){
        content.style.backgroundColor = color
    }


    var routes_data = [
      {
        path: '/',
        getComponent: function(){
            changeBgColor('white')
        }
      },
      {
        path: '/blue',
        getComponent: function(){
            changeBgColor('blue')
        }
      },
      {
        path: '/green',
        getComponent: function(){
            changeBgColor('green')
        }
      },
    ]
    
    // 注册路由表
    Router.router(routes_data)
</script>
</body>
</html>

原文地址https://github.com/joeyguo/blog/blob/master/lab/2016/router/simple-router.html