react-router 是創建在history之上的;咱們來談談這個history吧。
github: mjackson/historynode
history 一個管理js應用session會話歷史的js庫。它將不一樣環境(瀏覽器,node...)的變量統一成了一個簡易的API來管理歷史堆棧、導航、確認跳轉、以及sessions間的持續狀態。react
//基本 使用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:nginx
- push(location)
- replace(location)
- go(n)
- goBack()
- goForward()
一個 history 知道如何去監聽瀏覽器地址欄的變化, 並解析這個 URL 轉化爲 location 對象, 而後 router 使用它匹配到路由,最後正確地渲染對應的組件。git
location對象包括:github
pathname 同window.location.pathname
search 同window.location.search
state 一個捆綁在這個地址上的object對象
action PUSH, REPLACE, 或者 POP中的一個
key 惟一ID
經常使用的三種historyweb
// 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 的路由。express
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'))