React-router(ES6)

简介：React由一套完整的路由机制，下面我们根据官方文档，来了解一下官方路由React-router

1.路由的本质：是通过hash值不同，显示不同的页面，因为不用刷新整个页面，就能切换显示，因此通过这

种路由机制，我们可以实现单页应用。

首先：我们来自己写一个袖珍型的路由。

const About = React.createClass({/*...*/})
const Inbox = React.createClass({/*...*/})
const Home = React.createClass({/*...*/})

const App = React.createClass({
  getInitialState() {
    return {
      route: window.location.hash.substr(1)
    }
  },

  componentDidMount() {
    window.addEventListener('hashchange', () => {
      this.setState({
        route: window.location.hash.substr(1)
      })
    })
  },

  render() {
    let Child
    switch (this.state.route) {
      case '/about': Child = About; break;
      case '/inbox': Child = Inbox; break;
      default:      Child = Home;
    }

    return (
      <div>
        <h1>App</h1>
        <ul>
          <li><a href="#/about">About</a></li>
          <li><a href="#/inbox">Inbox</a></li>
        </ul>
        <Child/>
      </div>
    )
  }
})

render(<App />, document.body)

这里有一些ES6的语法，比如说ES6中函数的调用以及es6中const定义常量。

结果为：（a）当我们访问’/’主页是，展示的页面为：

    （b）当我们访问'/about'页是，展示的页面为：

从实现结果我们发现，当hash值不同的时候，可以实现不同的跳转，并且页面是没有刷新的。

2.通过React-router实现路由的原理

import React from 'react'
import { render } from 'react-dom