react-router 是建立在history之上的；我們來談談這個history吧。

history 一個管理js應用session會話歷史的js庫。它將不同環境（瀏覽器，node...）的變量統一成了一個簡易的API來管理歷史堆棧、導航、確認跳轉、以及sessions間的持續狀態。

//基本 使用import { createHistory } from 'history'const history = createHistory()// 當前的地址const location = history.getCurrentLocation()// 監聽當前的地址變換const unlisten = history.listen(location => {console.log(location.pathname)})// 將新入口放入歷史堆棧history.push({pathname: '/the/path',search: '?a=query',// 一些不存在url參數上面的當前url的狀態值state: { the: 'state' }})// When you're finished, stop the listenerunlisten()

你也可以使用 history對象來的方法來改變當前的location：

push(location)
replace(location)
go(n)
goBack()
goForward()

一個 history 知道如何去監聽瀏覽器地址欄的變化，並解析這個 URL 轉化為 location 對象，然后 router 使用它匹配到路由，最后正確地渲染對應的組件。

location對象包括：

pathname      同window.location.pathname
search        同window.location.search
state         一個捆綁在這個地址上的object對象
action        PUSH, REPLACE, 或者 POP中的一個
key           唯一ID

常用的三種history

// HTML5 history, 推薦import createHistory from 'history/lib/createBrowserHistory'// Hash historyimport createHistory from 'history/lib/createHashHistory'// 內存 history （如：node環境）import createHistory from 'history/lib/createMemoryHistory'

createHashHistory

這是一個你會獲取到的默認 history ，如果你不指定某個 history （即 <Router>{/* your routes */}</Router>）。它用到的是 URL 中的 hash（#）部分去創建形如 http://example.com/#/some/path 的路由。

Hash history 是默認的，因為它可以在服務器中不作任何配置就可以運行，並且它在全部常用的瀏覽器包括 IE8+ 都可以用。但是我們不推薦在實際生產中用到它，因為每一個 web 應用都應該有目的地去使用createBrowserHistory。

createBrowserHistory

Browser history 是由 React Router 創建瀏覽器應用推薦的 history。它使用 History API 在瀏覽器中被創建用於處理 URL，新建一個像這樣真實的`URL example.com/some/path`

服務器配置

首先服務器應該能夠處理 URL 請求。處理應用啟動最初的 / 這樣的請求應該沒問題，但當用戶來回跳轉並在 /accounts/123 刷新時，服務器就會收到來自 /accounts/123 的請求，這時你需要處理這個 URL 並在響應中包含 JavaScript 程序代碼。

一個 express 的應用可能看起來像這樣的：

const express = require('express')const path = require('path')const port = process.env.PORT || 8080const app = express()// 通常用於加載靜態資源app.use(express.static(__dirname + '/public'))// 在你應用 JavaScript 文件中包含了一個 script 標簽// 的 index.html 中處理任何一個 routeapp.get('*', function (request, response){response.sendFile(path.resolve(__dirname, 'public', 'index.html'))})app.listen(port)console.log("server started on port " + port)

如果你的服務器是 nginx，請使用 try_files directive：

server {
  ...
  location / {
    try_files $uri /index.html
  }
}

當在服務器上找不到其他文件時，這就會讓 nginx 服務器生成靜態文件和操作 index.html 文件。

createMemoryHistory

Memory history 不會在地址欄被操作或讀取。這就解釋了我們是如何實現服務器渲染的。同時它也非常適合測試和其他的渲染環境（像 React Native ）。

實現示例

import React from 'react'import createBrowserHistory from 'history/lib/createBrowserHistory'import { Router, Route, IndexRoute } from 'react-router'import App from '../components/App'import Home from '../components/Home'import About from '../components/About'import Features from '../components/Features'React.render(<Router history={createBrowserHistory()}><Route path='/' component={App}><IndexRoute component={Home} /><Route path='about' component={About} /><Route path='features' component={Features} /></Route></Router>,document.getElementById('app'))

react-router 中的history（react中關於后退鍵的處理用的到）