从 React Router 谈谈路由的那些事

React Router是专为 React 设计的路由解决方案，在使用 React 来开发 SPA （单页应用）项目时，都会需要路由功能，而 React Router 应该是目前使用率最高的。

React Router 并不是 Facebook 的 React 官方团队开发的，但是据说有官方人员参与开发。React Router 的设计思想来源于 Ember 的路由，如果原来有用过 Ember 的路由，那么应该对 React Router 不会陌生。

什么是路由？

对于没有开发过后端，也没有开发过 SPA 的前端来说，「路由」这个名词可能会让人比较困惑，这里的路由并不是指「硬件路由」，也不是网络七层协议中的「网络层路由」，但是其思想原理是一样的。我尽量简单通俗的介绍一下。

假如我们有一台提供 Web 服务的服务器的网络地址是：10.0.0.1，而该 Web 服务又提供了三个可供用户访问的页面，其页面 URI 分别是：

那么其路径就分别是/，/about，/concat。

当用户使用http://10.0.0.1/about来访问该页面时，Web 服务会接收到这个请求，然后会解析 URI 中的路径/about，在 Web 服务的程序中，该路径对应着相应的处理逻辑，程序会把请求交给路径所对应的处理逻辑，这样就完成了一次「路由分发」，这个分发就是通过「路由」来完成的。

前端路由

前端的路由和后端的路由在实现技术上不一样，但是原理都是一样的。在 HTML5 的historyAPI 出现之前，前端的路由都是通过hash来实现的，hash能兼容低版本的浏览器。如果我们把上面例子中提到的 3 个页面用hash来实现的话，它的 URI 规则中需要带上#。

Web 服务并不会解析hash，也就是说#后的内容 Web 服务都会自动忽略，但是JavaScript是可以通过window.location.hash读取到的，读取到路径加以解析之后就可以响应不同路径的逻辑处理。

history是 HTML5 才有的新 API，可以用来操作浏览器的 session history (会话历史)。基于history来实现的路由可以和最初的例子中提到的路径规则一样。