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