4-1-react-router-4.0 简介

在Web应用开发当中，前端扮演着越来越重要的角色，很多原本在后端负责的工作现在都可以放到前端来进行。例如对路由的控制。

在Web应用中，我们引入了一个新的概念，叫做前端路由。无需后端返回页面，我们就可以通过前端路由实现url的改变以及页面的切换。

较早前的实现前端路由的方法呢，比如说在angular1当中是通过hash的形式来处理的（也就是带#号的锚链接），前端路由实现的方法多种多样，比方说现在我们也可以通过操纵DOM中的history对象来实现。

为了更好地理解react-router，我们先来试着自己实现一下前端路由的功能。

其实我们简单拆解一下，前端路由主要需要实现两个基本的功能，一个是改变当前的url，另一个是根据改变了的url更改显示相应的页面内容。我们可以通过history.pushState方法来操作url地址。

至于根据改变后的url触发相关页面变化，浏览器本身会自带一个onpopstate事件，但是只有在我们点击返回或前进按钮时才会正常触发，所以我们需要自己动手实现一个绑定事件的功能。

在这里第一步呢，我们需要改写原本浏览器当中的history对象，在pushState方法被调用时，除了改变url呢，我们还需要让它触发onpushstate事件。我们这里呢，之间采用执行匿名函数的方法，完成对history对象的pushState方法的修改。

第二步呢，就需要来定义我们的window.onpopstate方法了，onpopstate这个方法呢，本来就是需要我们指向一个具体的函数的，在这里呢，我们只进行最简单的操作，在路由切换改变的时候呢，在页面当中显示出具体的路由。

接下来还有一步，就是为页面上的所有链接添加上事件绑定函数，这样在页面中的链接被点击之后才能够触发我们的pushState方法而不是直接从浏览器跳转了。

// patch history pushState
(function(history){
    var pushState = history.pushState;
    history.pushState = function(state) {
        if (typeof history.onpushstate == "function") {
            history.onpushstate({state: state});
        }
        return pushState.apply(history, arguments);
    }
})(window.history);
// Add trigger function
window.onpopstate = history.onpushstate = function(event) {
  document.getElementById('state').innerHTML = "location: " + document.location + ", state: " + JSON.stringify(event.state);
}
// Bind events to all links
var elements = document.getElementsByTagName('a');
for(var i = 0, len = elements.length; i < len; i++) {
    elements[i].onclick = function (event) {
        event.preventDefault();
        var route = event.target.getAttribute('href');
        history.pushState({page: route}, route, route);
        console.log('current state', history.state)
    }
}

这样，每当history.pushState运行后，相应的绑定事件也会被触发，我们就实现了一个基本的前端路由功能。

react-router为我们提供了一些预置的可以实现前端路由功能的组件。使用方法与React的组件保持一致，只需要在我们的应用中添加一些JSX标签，就可以直接为我们的应用添加上前端路由功能。

react-router这个库比较特别，到现在为止已经发布了4个主要版本，而且不同的版本之间差异比较大，尤其是这次发布的4.0版本完全采用了新的理念来设计，这次最新发布的react-router4.0一共包含了3个主要的库：

• react-router-dom (for web)

• react-router-native (for RN)

• react-router (core)

react-router-dom和react-router-native相当于在之前的react-router之上又抽象封装了一层，需要我们关注来手动配置的部分更少了，如果是开发Web应用的话，在绝大多数情况下，我们只需要引入react-router-dom就可以了，并且不需要像之前一样手动调整history等配置。

引入相应的组件，然后添加在我们开发的应用中合适的位置，一切就大功告成啦。

这节课我们先来体验一下react-router的功能，随后的课程当中我们会详细地介绍每个组件的使用方法的。

我们从react-router-dom当中引入3个组件BrowserRouter, Route, Link，这3个组件都是react组件，react-router设计的非常好，它不是通过配置啊绑定啊这种语法来使用，而是直接可以像使用其他react组件一样，我们为其传入props参数来使用。

我们还是直接来看代码，首先我们把BrowserRouter放到最外层，这是给我们的应用添加路由功能的容器组件。之后我们可以直接在应用里面添加Link组件，Link组件的to属性就是对应到相应的路由地址的。然后就是使用route来添加正式的路由了，每一个路由的path属性也是对应着路由地址，这个和上面的Link如果相同的话，点击对应的Link就可以跳转的对应的路由当中，每个路由还对应着一个component属性，这就是当地址跳转到对应的路由时会被渲染出来显示的组件了。

除此之外呢，我们来看这里的Topic组件，首先肯定的是，路由是可以嵌套使用的，与此同时呢，我们还可以通过例如这里使用的match属性来获取一些和路由相关的信息。

总而言之，react-router的使用是非常方便的，和我们使用其他封装好的react组件几乎没有任何区别，下一节课呢，我们将会正式的介绍react-router当中几个比较重要的组件的使用方法。

const { BrowserRouter, Route, Link } = ReactRouterDOM

const BasicExample = () => (
  <BrowserRouter>
    <div>
      <ul>
        <li><Link to="/">Home</Link></li>
        <li><Link to="/about">About</Link></li>
        <li><Link to="/topics">Topics</Link></li>
      </ul>

      <hr/>

      <Route exact path="/" component={Home}/>
      <Route path="/about" component={About}/>
      <Route path="/topics" component={Topics}/>
    </div>
  </BrowserRouter>
)

const Home = () => (
  <div>
    <h2>Home</h2>
  </div>
)

const About = () => (
  <div>
    <h2>About</h2>
  </div>
)

const Topics = ({ match }) => (
  <div>
    <h2>Topics</h2>
    <ul>
      <li>
        <Link to={`${match.url}/rendering`}>
          Rendering with React
        </Link>
      </li>
      <li>
        <Link to={`${match.url}/components`}>
          Components
        </Link>
      </li>
      <li>
        <Link to={`${match.url}/props-v-state`}>
          Props v. State
        </Link>
      </li>
    </ul>

    <Route path={`${match.url}/:topicId`} component={Topic}/>
    <Route exact path={match.url} render={() => (
      <h3>Please select a topic.</h3>
    )}/>
  </div>
)

const Topic = ({ match }) => (
  <div>
    <h3>{match.params.topicId}</h3>
  </div>
)

ReactDOM.render(<BasicExample />, document.getElementById('root'))