React中的路由系统
提起路由，首先想到的就是 ASPNET MVC 里面的路由系统--通过事先定义一组路由规则，程序运行时就能自动根据我们输入的URL来返回相对应的页面。前端中的路由与之类似，前端中的路由是根据你定义的路由规则来渲染不同的页面/组件，同时也会更新地址栏的URL。本篇文章要介绍的是React中经常使用到的路由，react-router主要使用HTML5的history API来同步你的UI和URL。
react-router的最新版本是v4.1.1，由于4.0版本和之间的版本API变化较大，所以本篇文章的内容并不能应用到之前的版本中。
要注意 react-router 有 react-router-dom 和 react-router-native 的区别。前者是用于开发WEB应用的，而后者适用于移动APP的，本文所介绍的是react-router-dom。
react-router 中的三大组件
react-router中的组件就是react中的组件，只不过它们被添加了一些特殊的逻辑而已。
Router Router相当于一个容器，不会被渲染出来。你的其他组件都要放在Router中才能使用到react-router的功能。根据功能的不同，Router还分为BrowserRouter，MemoryRouter等。
pnk pnk被渲染称一个a标签，通常以声明式的方式被定义在应用程序中。
Route Route包含一个path，并指明了在path与URL匹配时要渲染的组件。
Router
如果说我们的应用程序是一座小城的话，那么Route就是一座座带有门牌号的建筑物，而pnk就代表了到某个建筑物的路线。有了路线和目的地，那么就缺一位老司机了，没错Router就是这个老司机。
先来说一说BrowserRouter。BrowserRouter主要使用在浏览器中，也就是WEB应用中(废话，看名字就知道了)。它利用HTML5 的history API来同步URL和UI的变化。当我们点击了程序中的一个链接之后,BrowserRouter就会找出与这个URL匹配的Route，并将他们渲染出来。 既然BrowserRouter是用来管理我们的组件的，那么它当然要被放在最顶级的位置，而我们的应用程序的组件就作为它的一个子组件而存在。
import * as React from 'react'; import * as ReactDOM from 'react-dom'; import { BrowserRouter } from 'react-router-dom'; ReactDOM.render( <BrowserRouter> <App/> </BrowserRouter>, document.body);
有时候我们的应用只是整个系统中的一个模块，比如一个使用了ASPNET MVC中的area的后台管理模块，应用中的URL总是以 开头。这种情况下我们总不能每次定义pnk和Route的时候都带上admin吧？react-router已经考虑到了这种情况，所以为我们提供了一个basename属性。为BrowserRouter设置了basename之后，pnk中就可以省略掉admin了，而最后渲染出来的URL又会自动带上admin。
<BrowserRouter basename="/admin"/> ... <pnk to="/home"/> // 被渲染为 <a href="https://www.jb51.net/admin/home" > ... </BrowserRouter>
对于WEB应用，BrowserRouter是我们的首选。但是这里还有一些Browser Router其他的兄弟姐妹，在其他的一些情况下你或许会用得到。
HashRouter 这个内部使用window.location.hash，由于这里存在一些问题，因此官方推荐使用BrowserRouter来替代。
MemoryRouter 主要用在ReactNative这种非浏览器的环境中，因此直接将URL的history保存在了内存中。
StaticRouter 主要用于服务端渲染。
Link
Link就像是一个个的路牌，为我们指明组件的位置。pnk使用声明式的方式为应用程序提供导航功能，定义的Link最终会被渲染成一个a标签。pnk使用to这个属性来指明目标组件的路径，可以直接使用一个字符串，也可以传入一个对象。
// 字符串参数 <pnk to="/query">查询</pnk> // 对象参数 <pnk to={{ pathname: '/query', search: '?key=name', hash: '#hash' }}>查询</pnk>
Link提供的功能并不多，好在我们还有Navpnk可以选择。Navpnk是一个特殊版本的Link，可以使用activeClassName来设置pnk被选中时被附加的class，使用activeStyle来配置被选中时应用的样式。此外，还有一个exact属性,此属性要求location完全匹配才会附加class和style。这里说的匹配是指地址栏中的URl和这个Link的to指定的location相匹配。
// 选中后被添加class selected <Navpnk to={'https://www.jb51.net/'} exact activeClassName='selected'>Home</Navpnk> // 选中后被附加样式 color:red <Navpnk to={'/gallery'} activeStyle={{color:red}}>Gallery</Navpnk>
Route
Route应该是react-route中最重要的组件了，它的作用是当location与Route的path匹配时渲染Route中的Component。如果有多个Route匹配，那么这些Route的Component都会被渲染。
与pnk类似，Route也有一个exact属性，作用也是要求location与Route的path绝对匹配。