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