react-router-dom

進入項目目錄，使用npm安裝react-router-dom
npm install react-router-dom --save-dev而後咱們新建倆個頁面，分別命名爲「home」和「detail」。在頁面中編寫以下代碼:
而後再新建一個路由組件，命名爲「Router.js」，並編寫以下代碼:
定義了一個純路由組件，將倆個頁面組件Home的Detail使用Router組件包裹，外面套用Switch做路由匹配，當路由組件檢測到地址欄與Route的path匹配時，就會自動加載響應頁面。而後在入口文件中——我這裏指定的是index.js—編寫以下代碼：
這裏至關於向頁面返回了一個路由組件。咱們運行看一下效果，《去detail》
輸入「http://localhost:3000/#/detail」:《回到home》
經過a標籤跳轉
能夠看到其實路由已經開始工做了，接下來咱們再來作頁面間的跳轉。在home.js和detail.js中，咱們修改以下代碼：
 
 從新打包運行，在瀏覽器地址輸入「http://localhost:3000」，試試看頁面可否正常跳轉。若是不能，請按步驟一步一步檢查代碼是否有誤。以上是使用a標籤的href進行頁面間跳轉，此外react-router-dom還提供了經過函數的方式跳轉頁面。
經過函數跳轉
首先咱們須要修改Router.js中的倆處代碼：
而後在home.js中：
 在a標籤下面添加一個按鈕並加上onClick事件，經過this.props.history.push這個函數跳到detail頁面。在路由組件中加入的代碼就是將history這個對象註冊到組件的props中去，而後就能夠在子組件中經過props調用history的push方法跳轉頁面。
不少場景下，咱們還須要在頁面跳轉的同時傳遞參數，在react-router-dom中，一樣提供了倆種方式進行傳參。
url傳參
 在router.js中，修改以下代碼：
而後修改detail.js，使用this.props.match.params獲取url傳過來的參數：
componentDidMount() {
console.log(this.props.match.params);
}
在地址欄輸入「http://localhost:3000/#/detail/3」，打開控制檯：
 能夠看到傳過去的id=3已經被獲取到了。react-router-dom就是經過「/:」去匹配url傳遞的參數。
隱式傳參
此外還能夠經過push函數隱式傳參。
修改home.js代碼以下：
// home.js

import React from 'react';

export default class Home extends React.Component {
constructor(props) {
super(props);
}


render() {
return (
<div>
< a href=' '>去detail</ a>
<button onClick={() => this.props.history.push({
pathname: '/detail',
state: {
id: 3
}
})}>經過函數跳轉</button>
</div>
)
}
}
 在detail.js中，就可使用this.props.history.location.state獲取home傳過來的參數：
// detail.js

componentDidMount() {
//console.log(this.props.match.params);
console.log(this.props.history.location.state);
}跳轉後打開控制檯能夠看到參數被打印：
其餘函數
replace
有些場景下，重複使用push或a標籤跳轉會產生死循環，爲了不這種狀況出現，react-router-dom提供了replace。在可能會出現死循環的地方使用replace來跳轉：
this.props.history.replace('/detail');goback
 場景中須要返回上級頁面的時候使用：
this.props.history.goBack();