react-router

安装：

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。

 

参考文献：http://react-china.org/t/react-router4/15843