安装：
npm install --save react-router
注意：如果您正在编写将在浏览器中运行的应用程序，则应该安装react-router-dom,同样，如果您正在编写ReactNative应用程序，则应该安装react-router-native。
React-router
React-router提供一些router的核心api，包括Router,Route,Switch等，但是没有提供dom操作进行跳转的api
React-router-dom
React-router-dom 提供了BrowserRouter ,Route ,Link 等api，我们通过dom的事件控制路由 。例如点击一个按钮进行跳转，所以我们跟需要react-router-dom 安装简单
npm install react-router-dom --save
react-router-dom 的核心用法
HashRouter 和BrowserRouter
它们两个是路由的基本，我们需要将它们包裹在最外层，我们只要选择其中的一个就可以。
HashRouter
如果你使用过react-router2或3或者vue-router,你经常会发现一个现象就是url中会有个#,例如：localhost:3000/# ,HashRouter就会出现这种情况，它是通过hash值来对路径进行控制的，如：HashRouter,你的路由就会默认有# 代码如下：
import React from 'react'; import ReactDOM from 'react-dom'; //import registerServiceWorker from './registerServiceWorker'; import {BrowserRouter , HashRouter , Route} from 'react-router-dom'; function home (){ return <h2>Home Page</h2> } ReactDOM.render ( <HashRouter> <Route path ='/' component = {home} ></Route> </HashRouter> ,document.getElementById('root'); ) //registerServiceWorker();
BrowserRouter
很多情况下我们不需要这个#，这时我们就需要BrowserRouter
<BrowserRouter>
<Route path ='/' component = {home} ></Route>
</BrowserRouter> ,document.getElementById('root');
它的原理是使用HTML5 history API(pushState ,replaceState,popState)来使你的内容随着url动态改变的。
如果你的文件是放在服务器的二级目录下则可以使用它。
<BrowserRouter basename='/calendar'>
<Route path ='/' component = {home} ></Route>
</BrowserRouter> ,document.getElementById('root');
Router
Router是路由的一个原材料，它控制路径嘴硬显示的组件。我们经常是exact,path 以及component属性。
exact 控制匹配到路径时不会再继续向下匹配 ，path 标识路由的路径 ，component表示路径对应显示的组件。
Link和NavLink的选择
两者都是可以控制路由跳转的，不同点是NavLink的api更多 。
Link 主要api是to，to可以接受string或者一个object，来控制url,使用方法如下
<Link to = '/courses' /> <Link to ={{ pathname :'/courses', search:'?sort =name', hash:'#the-hash', state:{fromDashboard:true} }} />
NavLink
<NavLink exact activeClassName='selected' to='/second/1234'>second</NavLink>
exact 用于严格匹配 ，匹配到/则不会继续向下匹配 ，to 则是控制跳转的路径，activeClassName是选中状态的类名， 我们在/second后面
添加1234来想路由中传递消息，这结合了/second/:id。